/*
 * Workrlab — UI Components
 * Herbruikbare interface-onderdelen: buttons, forms, cards, badges,
 * alerts, table, score bar, avatar, empty state, pill-search,
 * pagination, modal, tabs, card-layout systeem
 *
 * Vereist: base.css
 */

/* ─────────────────────────────────────────
   5. Buttons
───────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    transform 100ms var(--ease),
    box-shadow var(--duration) var(--ease);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}

.btn:active {
  transform: scale(.98);
}

.btn:disabled,
.btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Varianten */
.btn-primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-color: transparent;
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.btn-accent {
  background: var(--sky-500);
  color: white;
  border-color: var(--sky-500);
}

.btn-accent:hover {
  background: var(--sky-600);
  border-color: var(--sky-600);
  color: white;
}

.btn-outline,
.btn-secondary {
  background: white;
  color: var(--slate-700);
  border-color: var(--slate-200);
}

.btn-outline:hover,
.btn-secondary:hover {
  background: var(--slate-50);
  border-color: var(--slate-500);
  color: var(--slate-900);
}

.btn-ghost {
  background: transparent;
  color: var(--slate-600);
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--slate-100);
  color: var(--slate-900);
}

.btn-danger {
  background: var(--red-50);
  color: var(--red-600);
  border-color: var(--red-100);
}

.btn-danger:hover {
  background: var(--red-100);
  border-color: var(--red-600);
}

/* Groottes */
.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

.btn-filter-clear {
  min-height: 2.25rem;
  align-self: stretch;
  white-space: nowrap;
}

.btn-lg {
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
}

.btn-xl {
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-lg);
}

.btn-full {
  width: 100%;
}

/* Icon button */
.btn-icon {
  padding: 8px;
  border-radius: var(--radius-sm);
  background: transparent;
  border-color: transparent;
  color: var(--slate-500);
}

.btn-icon:hover {
  background: var(--slate-100);
  color: var(--slate-700);
}

.btn-icon svg,
.btn-icon i.lni {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
}

/* Loading state */
.btn-loading {
  pointer-events: none;
  opacity: .8;
}

.btn-loading::after {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin-left: 4px;
}

/* ─────────────────────────────────────────
   6. Form elementen
───────────────────────────────────────── */
.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-600);
  margin-bottom: 10px;
  letter-spacing: .01em;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--slate-900);
  outline: none;
  transition:
    border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
  appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--slate-500);
}

.form-input:hover,
.form-select:hover {
  border-color: var(--slate-500);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--sky-500);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .12);
}

.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
  border-color: var(--red-500) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .10);
}

.form-input.is-error:focus,
.form-select.is-error:focus,
.form-textarea.is-error:focus {
  border-color: var(--red-500) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Dropdown arrow — distinguishes select from text input */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

/* Input met icon */
.input-group {
  position: relative;
}

.input-group .form-input {
  padding-left: 40px;
}

.input-group .input-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--slate-500);
  pointer-events: none;
}

.input-group .input-icon svg,
.input-group .input-icon i.lni {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
}

/* Input met action rechts */
.input-group-action .form-input {
  padding-right: 44px;
}

.input-group-action .input-action {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--slate-500);
  border-radius: var(--radius-xs);
  transition: color var(--duration) var(--ease);
  display: flex;
  align-items: center;
}

.input-group-action .input-action:hover {
  color: var(--slate-700);
}

.input-group-action .input-action svg,
.input-group-action .input-action i.lni {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
}

/* Form feedback */
.form-error {
  font-size: 12px;
  color: var(--red-500);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-hint {
  font-size: 12px;
  color: var(--slate-500);
  margin-top: 5px;
}

/* Checkbox & radio */
.form-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* Eén opmaak voor elk keuzevakje in het platform. Gebruik .form-check op de
   omhullende label, of .form-check-input rechtstreeks op een los vakje dat
   geen wikkel heeft. Zonder dit valt een vakje terug op de standaard van de
   browser, en dan staan er twee soorten naast elkaar op dezelfde pagina. */
.form-check input[type="checkbox"],
.form-check input[type="radio"],
.form-check-input {
  width: 16px;
  height: 16px;
  accent-color: var(--sky-500);
  cursor: pointer;
  flex-shrink: 0;
}

/* Voor een label met een uitleg eronder: het vakje bij de eerste regel. */
.form-check--top {
  align-items: flex-start;
}

.form-check--top .form-check-input,
.form-check--top input[type="checkbox"] {
  margin-top: 2px;
}

.form-check-label {
  font-size: 13px;
  color: var(--slate-700);
  cursor: pointer;
  user-select: none;
}

/* Divider "of" */
.form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}

.form-divider-line {
  flex: 1;
  height: 1px;
  background: var(--slate-200);
}

.form-divider-text {
  font-size: 12px;
  color: var(--slate-500);
  white-space: nowrap;
}

/* ─────────────────────────────────────────
   7. Cards
───────────────────────────────────────── */
.card {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04), 0 1px 2px rgba(15, 23, 42, .03);
}

.card-sm {
  padding: 14px 18px;
  border-radius: var(--radius-md);
}

.card-lg {
  padding: 28px 32px;
  border-radius: var(--radius-xl);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--slate-100);
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-900);
  letter-spacing: -.01em;
}

.card-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-500);
  text-decoration: none;
  transition: color var(--duration) var(--ease);
}

.card-link:hover {
  color: var(--slate-900);
}

.card-subtitle {
  font-size: 12px;
  color: var(--slate-500);
  margin-top: 2px;
}

/* Stat card */
.stat-card {
  padding: 20px 22px;
}

.stat-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-500);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.stat-card-value {
  font-size: 30px;
  font-weight: 600;
  color: var(--slate-900);
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 6px;
}

.stat-card-sub {
  font-size: 12px;
  color: var(--slate-500);
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-card-accent-top {
  border-top: 2px solid var(--sky-500);
}

.stat-card-accent-left {
  border-left: 2px solid var(--sky-500);
}

/* ─────────────────────────────────────────
   8. Badges & pills
───────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.6;
  font-size: 10px;
  border: 1px solid var(--slate-200);
  padding: 2px 8px;
  border-radius: 99px;
}

/* Varianten */
.badge-slate {
  color: var(--slate-500);
  background: var(--slate-50);
}

.badge-sky {
  background: var(--sky-100);
  color: var(--sky-700);
}

.badge-cyan {
  background: var(--cyan-100);
  color: var(--cyan-600);
}

.badge-green {
  background: var(--green-100);
  color: var(--green-600);
}

.badge-orange {
  background: var(--orange-100);
  color: var(--orange-500);
}

.badge-red {
  background: var(--red-100);
  color: var(--red-600);
}

/* Met gekleurde dot */
.badge-dot::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Pill (grotere badge) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid currentColor;
}

/* ─────────────────────────────────────────
   9. Alerts
───────────────────────────────────────── */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid transparent;
  margin-bottom: 20px;
}

.alert svg,
.alert i.lni {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.alert-info {
  background: var(--sky-50);
  color: var(--sky-700);
  border-color: var(--sky-100);
}

.alert-success {
  background: var(--green-50);
  color: var(--green-600);
  border-color: var(--green-100);
}

.alert-warning {
  background: var(--orange-100);
  color: var(--orange-500);
  border-color: #FED7AA;
}

.alert-error {
  background: var(--red-50);
  color: var(--red-600);
  border-color: var(--red-100);
}

.alert-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: currentColor;
  opacity: .6;
  padding: 0;
  flex-shrink: 0;
}

.alert-dismiss:hover {
  opacity: 1;
}

/* ─────────────────────────────────────────
   11. Filter bar
───────────────────────────────────────── */

/* Filter bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-bar .form-input {
  flex: 1;
  min-width: 200px;
  border: none;
  box-shadow: none;
  padding: 6px 10px;
  background: var(--slate-50);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.filter-bar .form-input:focus {
  box-shadow: 0 0 0 2px var(--sky-500);
}

/* ─────────────────────────────────────────
   12. Tabel
───────────────────────────────────────── */
.table-container {
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Horizontaal scrollen op smalle schermen */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table thead tr {
  background: var(--slate-50);
  border-bottom: 1px solid var(--slate-200);
}

.table th {
  padding: 11px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-500);
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table td {
  padding: 13px 16px;
  color: var(--slate-700);
  border-bottom: 1px solid var(--slate-100);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr {
  transition: background var(--duration) var(--ease);
}

.table tbody tr:hover td {
  background: var(--slate-50);
}

.table tbody tr.selected td {
  background: var(--sky-50);
}

.table-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--slate-500);
  font-size: 14px;
}

/* ─────────────────────────────────────────
   13. Score bar
───────────────────────────────────────── */
.score-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.score-bar-track {
  flex: 1;
  height: 5px;
  background: var(--slate-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.score-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--sky-500);
  transition: width .6s var(--ease-out);
}

.score-bar-fill.high {
  background: var(--green-500);
}

.score-bar-fill.medium {
  background: var(--sky-500);
}

.score-bar-fill.low {
  background: var(--orange-500);
}

.score-bar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-600);
  min-width: 36px;
  text-align: right;
}

/* ─────────────────────────────────────────
   14. Avatar
───────────────────────────────────────── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 600;
  flex-shrink: 0;
  background: var(--sky-100);
  color: var(--sky-700);
  font-size: 11px;
  width: 32px;
  height: 32px;
}

.avatar-sm {
  width: 24px;
  height: 24px;
  font-size: 9px;
}

.avatar-md {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.avatar-lg {
  width: 44px;
  height: 44px;
  font-size: 15px;
}

.avatar-xl {
  width: 56px;
  height: 56px;
  font-size: 18px;
}

.avatar-slate {
  background: var(--slate-100);
  color: var(--slate-600);
}

.avatar-sky {
  background: var(--sky-100);
  color: var(--sky-700);
}

.avatar-green {
  background: var(--green-100);
  color: var(--green-600);
}

.avatar-orange {
  background: var(--orange-100);
  color: var(--orange-500);
}

/* Avatar groep */
.avatar-group {
  display: flex;
}

.avatar-group .avatar {
  border: 2px solid white;
  margin-left: -6px;
}

.avatar-group .avatar:first-child {
  margin-left: 0;
}

/* ── Avatar stack (overlapping row, used on match runs, dashboard etc.) ── */
.avatar-stack {
  display: flex;
  align-items: center;
}

.avatar-stack .avatar,
.avatar-stack img {
  width: 24px;
  height: 24px;
  border: 2px solid white;
  border-radius: 50%;
  margin-left: -6px;
  transition: transform var(--duration) var(--ease);
  flex-shrink: 0;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.avatar-stack .avatar:first-child,
.avatar-stack img:first-child {
  margin-left: 0;
}

.avatar-stack .avatar:hover,
.avatar-stack img:hover {
  transform: translateY(-2px);
  z-index: 10 !important;
}

.avatar-overflow {
  background: var(--slate-100);
  color: var(--slate-500);
  font-size: 10px;
  font-weight: 600;
}

/* ─────────────────────────────────────────
/* ─────────────────────────────────────────
   Empty states
───────────────────────────────────────── */

/* ── Empty-state animations ── */
@keyframes es-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}

/* ── es2: geanimeerde icon empty states ─────────────────────────────────── */
@keyframes esi-pop {
  from { opacity: 0; transform: scale(.5) }
  to   { opacity: 1; transform: scale(1) }
}
@keyframes esi-float {
  0%, 100% { transform: translateY(0) }
  50%       { transform: translateY(-5px) }
}
@keyframes esi-fade {
  from { opacity: 0; transform: translateY(6px) }
  to   { opacity: 1; transform: translateY(0) }
}

.es2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 26px;
  text-align: center;
  gap: 10px;
}
.es2-art {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: esi-pop .45s cubic-bezier(.34,1.56,.64,1) .1s both;
}
.es2-art i {
  font-size: 30px;
  line-height: 1;
  animation: esi-float 3s ease-in-out .65s infinite;
}
.es2-art.esi-indigo { background: #eef2ff; }
.es2-art.esi-indigo i { color: #6366f1; }
.es2-art.esi-purple { background: #f5f3ff; }
.es2-art.esi-purple i { color: #8b5cf6; }
.es2-art.esi-sky    { background: #f0f9ff; }
.es2-art.esi-sky i  { color: #0ea5e9; }
.es2-art.esi-emerald { background: #ecfdf5; }
.es2-art.esi-emerald i { color: #10b981; }
.es2-art.esi-amber  { background: #fffbeb; }
.es2-art.esi-amber i { color: #f59e0b; }

.es2-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-600);
  animation: esi-fade .4s ease .35s both;
}
.es2-sub {
  font-size: 12px;
  color: var(--slate-400);
  max-width: 240px;
  line-height: 1.65;
  animation: esi-fade .4s ease .5s both;
}
@keyframes es-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(99,102,241,.10); }
  50%       { box-shadow: 0 8px 28px rgba(99,102,241,.22); }
}
@keyframes es-ring {
  0%   { transform: translate(-50%,-50%) scale(.7); opacity: .5; }
  100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; }
}
@keyframes es-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes es-dot {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50%       { transform: translateY(-8px); opacity: 1; }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtiele radiale achtergrondgloed */
.empty-state::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 40%, rgba(99,102,241,.05) 0%, transparent 70%);
  pointer-events: none;
}

/* Puls-ring achter het icoon */
.empty-state-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #ede9fe 0%, #ede9fe 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: #7c3aed;
  position: relative;
  z-index: 1;
  animation: es-float 3.2s ease-in-out infinite, es-glow 3.2s ease-in-out infinite;
}

/* Radar ring */
.empty-state-icon::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(99,102,241,.3);
  animation: es-ring 2.4s ease-out infinite;
  pointer-events: none;
}
.empty-state-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 1.5px solid rgba(99,102,241,.2);
  animation: es-ring 2.4s ease-out infinite;
  animation-delay: .8s;
  pointer-events: none;
}

.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-700);
  margin-bottom: 6px;
  animation: es-fadein .5s ease both;
  animation-delay: .1s;
}

.empty-state-desc {
  font-size: 13px;
  color: var(--slate-500);
  line-height: 1.6;
  max-width: 280px;
  margin-bottom: 20px;
  animation: es-fadein .5s ease both;
  animation-delay: .2s;
}

/* ═══════════════════════════════════════
   Pill zoekbalk — gedeeld tussen pagina's
   ═══════════════════════════════════════ */

.pill-search {
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: 99px;
  height: 48px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
  overflow: hidden;
  margin-bottom: 20px;
}

.pill-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  flex: 1;
  height: 100%;
  min-width: 0;
  position: relative;
}

.pill-field:hover {
  background: var(--slate-50);
}

.pill-field-icon {
  color: var(--slate-500);
  flex-shrink: 0;
}

.pill-field-inner {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.pill-field-label {
  font-size: 9px;
  font-weight: 500;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}

.pill-field input:not([type="checkbox"]):not([type="radio"]),
.pill-field select {
  border: none;
  outline: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-900);
  background: transparent;
  width: 100%;
  font-family: var(--font-sans);
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.pill-field input::placeholder {
  color: var(--slate-500);
  font-weight: 400;
}

.pill-field select {
  color: var(--slate-500);
}

.pill-field select:focus {
  color: var(--slate-900);
}

.pill-divider {
  width: 1px;
  height: 28px;
  background: var(--slate-200);
  flex-shrink: 0;
}

.pill-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--slate-900);
  color: white;
  font-size: 13px;
  font-weight: 600;
  padding: 0 20px;
  height: 100%;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-sans);
  flex-shrink: 0;
  transition: background .12s;
  border-radius: 0 99px 99px 0;
}

.pill-btn:hover {
  background: #1e293b;
}
.pill-btn-active {
  background: #4f46e5;
}
.pill-btn-active:hover {
  background: #4338ca;
}

.pill-clear {
  display: flex;
  align-items: center;
  padding: 0 12px 0 0;
  font-size: 11px;
  color: var(--slate-500);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .12s;
  margin: 0 10px
}

.pill-clear:hover {
  color: var(--slate-600);
}

/* ═══════════════════════════════════════
   Multi-select dropdown panel
   Panels zijn position:fixed zodat ze de overflow:hidden
   van .pill-search ontsnappen en visueel onder de balk
   verschijnen.
   ═══════════════════════════════════════ */

.pill-ms-panel {
  background: var(--white, #fff);
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
  padding: 5px;
  z-index: 9999;
}

[data-theme="dark"] .pill-ms-panel,
@media (prefers-color-scheme: dark) {
  .pill-ms-panel {
    background: var(--slate-800, #1e293b);
    border-color: var(--slate-700, #334155);
  }
}

.pill-ms-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  color: var(--slate-700);
  user-select: none;
  transition: background .1s;
  white-space: nowrap;
}

.pill-ms-opt:hover {
  background: var(--slate-50);
}

.pill-ms-opt--active {
  background: #ede9fe;
  color: #4f46e5;
  font-weight: 600;
}

.pill-ms-opt--active:hover {
  background: #ddd6fe;
}

.pill-ms-opt input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #6366f1;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.pill-ms-value {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill-ms-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #6366f1;
  color: #fff;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
  flex-shrink: 0;
}

.pill-field--ms {
  cursor: pointer;
  user-select: none;
}

.pill-ms-clear {
  display: block;
  width: calc(100% - 10px);
  margin: 4px 5px 2px;
  padding: 5px 10px;
  background: none;
  border: none;
  border-top: 1px solid var(--slate-100);
  border-radius: 0;
  font-size: 12px;
  color: var(--slate-400);
  cursor: pointer;
  text-align: left;
}

.pill-ms-clear:hover {
  color: #6366f1;
}

.pill-field--ms .pill-field-inner {
  cursor: pointer;
}

.pill-native-select {
  all: unset;
  font-size: 13px;
  color: var(--slate-700);
  cursor: pointer;
  width: 100%;
}
.pill-native-select option { color: var(--slate-700); }

/* ═══════════════════════════════════════
   Paginering — pill stijl
   ═══════════════════════════════════════ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 24px;
}

/* Vorige / volgende — solid indigo cirkel wanneer actief */
.pagination-prev,
.pagination-next {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #4f46e5;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .15s, transform .15s;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
}

.pagination-prev:hover,
.pagination-next:hover {
  background: #4338ca;
  transform: scale(1.06);
}

.pagination-prev.disabled,
.pagination-next.disabled {
  background: var(--slate-100);
  color: var(--slate-400);
  pointer-events: none;
  transform: none;
}

/* Eerste / laatste pagina (<<, >>) — outline cirkel, iets kleiner */
.pagination-edge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  color: var(--slate-400);
  border: 1.5px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all .15s;
  flex-shrink: 0;
}

.pagination-edge:hover {
  background: var(--slate-100);
  color: var(--slate-600);
  border-color: var(--slate-300);
}

.pagination-edge.disabled {
  opacity: .45;
  pointer-events: none;
}

/* Paginanummers — geen pill-achtergrond meer */
.pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px;
}

.pagination-page {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-600);
  text-decoration: none;
  transition: all .12s;
  border: 2px solid transparent;
}

.pagination-page:hover {
  background: var(--slate-100);
  color: var(--slate-800);
}

.pagination-page.active {
  background: transparent;
  color: #4f46e5;
  font-weight: 700;
  border-color: #4f46e5;
}

.pagination-dots {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--slate-400);
  letter-spacing: 1px;
}

/* ─────────────────────────────────────────
   Card varianten & universele card structuur
   Gebruikt door: opportunities, placements,
   employees, match runs
───────────────────────────────────────── */

.card-gradient {
  background: linear-gradient(160deg, #f5f3ff 0%, white 50%);
}

.card-lift {
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: all .18s ease;
  position: relative;
}

.card-lift:hover {
  border-color: var(--slate-500);
  box-shadow: 0 8px 28px rgba(0,0,0,.09);
  transform: translateY(-3px);
}

/* Klikbare card overlay — maakt de volledige kaart klikbaar
   zonder interne links/buttons te blokkeren */
.card-click-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

/* Zorg dat interne interactieve elementen boven de overlay zitten */
.card-click-overlay ~ * {
  position: relative;
  z-index: 1;
}

.card-flush {
  padding: 0;
  overflow: hidden;
}

/* Card body */
.card-body {
  padding: 14px 14px 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Tags rij */
.card-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.card-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--slate-100);
  color: var(--slate-500);
  white-space: nowrap;
}

.card-tag-blue   { background: var(--sky-50);   color: var(--sky-700); }
.card-tag-green  { background: #dcfce7;          color: #15803d; }
.card-tag-red    { background: #fef2f2;          color: var(--red-600); }
.card-tag-orange { background: #fff7ed;          color: #c2410c; }
.card-tag-purple { background: #f5f3ff;          color: #6d28d9; }

/* Card header: icon + titel + sub */
.card-header-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: white;
  border: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: var(--sky-600);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.card-title-wrap { flex: 1; min-width: 0; }

.card-title-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.3;
  text-decoration: none;
  display: block;
  margin-bottom: 3px;
  transition: color .12s;
}
.card-title-link:hover { color: var(--sky-600); }

.card-title-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-900);
  line-height: 1.3;
  margin-bottom: 3px;
}

.card-sub {
  font-size: 12px;
  color: var(--slate-500);
}

/* Beschrijving */
.card-desc {
  font-size: 12px;
  color: var(--slate-500);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Twee regels is genoeg om te scannen, niet om te lezen: hover toont de
   samenvatting als tooltip, 'Meer lezen' klapt de tekst in de kaart uit. */
.card-desc.is-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
.card-desc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--sky-600);
  cursor: pointer;
}
.card-desc-toggle:hover { text-decoration: underline; }
.card-desc-toggle i { font-size: 9px; transition: transform .15s; }
.card-desc.is-open + .card-desc-toggle i { transform: rotate(180deg); }

/* Meta pills */
.card-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.card-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--slate-600);
  background: var(--slate-100);
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}
.card-meta-item svg,
.card-meta-item i.lni { color: var(--slate-500); }

/* Skills / extra info */
.card-skills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  /* border-bottom: 1px solid var(--slate-100); */
}

.card-skill {
  font-size: 10px;
  color: var(--slate-500);
  background: var(--slate-50);
  border: 1px solid var(--slate-200);
  padding: 2px 8px;
  border-radius: 99px;
}

/* Card footer */
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--slate-100);
  gap: 8px;
}

.card-footer-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--slate-900);
  letter-spacing: -.03em;
}

.card-footer-value-sm {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-900);
}

.card-footer-label {
  font-size: 10px;
  color: var(--slate-500);
  font-weight: 400;
  margin-left: 1px;
}

.card-footer-meta {
  font-size: 11px;
  color: var(--slate-500);
}

/* 3-puntjes menu */
.card-menu-wrap {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
}
/* De knoppen zweven rechtsboven over de kaart; de titel eronder moet er
   ruimte voor laten, anders loopt een lange titel onder de knoppen door. */
.card-menu-wrap ~ .card-body .card-header-row .card-title-wrap {
  padding-right: 68px;
}

.card-menu-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--slate-200);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--slate-500);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: all .12s;
  user-select: none;
}
.card-menu-btn:hover { background: var(--slate-50); color: var(--slate-600); }

.card-dropdown {
  position: absolute;
  top: 34px;
  right: 0;
  background: white;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 168px;
  overflow: hidden;
}

.card-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-700);
  cursor: pointer;
  transition: background .1s;
  text-decoration: none;
  border-bottom: 1px solid var(--slate-50);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
}
.card-dropdown-item:last-child { border-bottom: none; }
.card-dropdown-item:hover { background: var(--slate-50); }
.card-dropdown-item-primary { color: var(--slate-900); font-weight: 700; }

.card-dd-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 13px;
}

/* Match kandidaten strip */
.card-matches {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--slate-100);
  flex-wrap: wrap;
  margin-top: auto;
}

.card-match-avatars {
  display: flex;
  align-items: center;
}

.card-match-av {
  width: 26px !important;
  height: 26px !important;
  font-size: 9px !important;
  border: 2px solid white !important;
  border-radius: 50% !important;
  object-fit: cover;
  margin-left: -6px;
}
.card-match-av:first-child { margin-left: 0; }

.card-match-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-600);
}
.card-match-label svg,
.card-match-label i.lni { color: var(--slate-500); }

.card-match-score {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-500);
  margin-left: 2px;
}

.card-run-link {
  font-size: 11px;
  font-weight: 500;
  color: var(--slate-600);
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  background: white;
  transition: all .12s;
}
.card-run-link:hover {
  background: var(--slate-50);
  border-color: var(--slate-500);
  color: var(--slate-900);
}

.card-rerun-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  color: var(--slate-600);
  background: white;
  border: 1px solid var(--slate-200);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  margin-left: auto;
  transition: all .12s;
}
.card-rerun-btn:hover {
  background: var(--slate-50);
  border-color: var(--slate-500);
  color: var(--slate-900);
}

.card-empty-matches {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 500;
  padding: 8px 0;
  border-top: 1px solid var(--slate-100);
  margin-top: auto;
}
.card-empty-matches svg,
.card-empty-matches i.lni { color: var(--slate-500); }

/* Progress bar in card */
.card-progress-wrap { padding: 4px 0 10px; }

.card-progress-inner {
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-progress-inner.pb-ok       { background: var(--sky-50); }
.card-progress-inner.pb-warning  { background: #fff7ed; }
.card-progress-inner.pb-critical { background: #fef2f2; }

.card-pb-pct-box {
  min-width: 42px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}
.pb-ok       .card-pb-pct-box { background: var(--sky-500); }
.pb-warning  .card-pb-pct-box { background: #f97316; }
.pb-critical .card-pb-pct-box { background: #ef4444; }

.card-pb-track-wrap { flex: 1; display: flex; flex-direction: column; gap: 4px; }

.card-pb-label {
  font-size: 10px;
  font-weight: 700;
}
.pb-ok       .card-pb-label { color: var(--sky-600); }
.pb-warning  .card-pb-label { color: #c2410c; }
.pb-critical .card-pb-label { color: #dc2626; }

.card-pb-segments {
  display: flex;
  gap: 3px;
  height: 7px;
}

.card-pb-seg { flex: 1; border-radius: 99px; background: var(--slate-200); }

/* Segment kleuren — lichtblauw naar vol blauw */
.card-pb-seg-1  { background: rgba(56,189,248,.15); }
.card-pb-seg-2  { background: rgba(56,189,248,.25); }
.card-pb-seg-3  { background: rgba(56,189,248,.35); }
.card-pb-seg-4  { background: rgba(56,189,248,.45); }
.card-pb-seg-5  { background: rgba(56,189,248,.55); }
.card-pb-seg-6  { background: rgba(56,189,248,.65); }
.card-pb-seg-7  { background: rgba(56,189,248,.75); }
.card-pb-seg-8  { background: rgba(56,189,248,.85); }
.card-pb-seg-9  { background: rgba(56,189,248,.92); }
.card-pb-seg-10 { background: rgba(56,189,248,1.00); }


/* ─────────────────────────────────────────
   Modal — globale standaard
   Gebruik: modal-overlay > modal-container >
            modal-header (modal-header-left + modal-close) +
            modal-body + modal-footer
───────────────────────────────────────── */

/* Alpine x-cloak: verborgen tot Alpine de x-show heeft toegepast. Globaal,
   anders staat een modal-overlay even bovenop de pagina en blokkeert hij
   alle knoppen tot Alpine klaar is. */
[x-cloak] { display: none !important; }

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn .15s ease;
}

.modal-container {
  background: white;
  border-radius: 20px;
  width: 100%;
  max-width: 540px;
  box-shadow: 0 24px 64px rgba(0,0,0,.15), 0 4px 16px rgba(0,0,0,.06);
  border: 0.5px solid var(--slate-200);
  overflow: hidden;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  animation: fadeUp .2s var(--ease-out);
}

.modal-container-sm { max-width: 420px; }
.modal-container-lg { max-width: 680px; }

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 0.5px solid var(--slate-200);
  background: var(--slate-50);
}

.modal-header-left { flex: 1; min-width: 0; }

.modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--slate-900);
  letter-spacing: -.02em;
  line-height: 1.3;
  margin-bottom: 3px;
}

.modal-subtitle {
  font-size: 12px;
  color: var(--slate-500);
  line-height: 1.4;
  margin: 0;
}

.modal-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 0.5px solid var(--slate-200);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--slate-500);
  flex-shrink: 0;
  transition: all .12s ease;
}

.modal-close:hover {
  background: var(--slate-100);
  color: var(--slate-700);
  border-color: var(--slate-500);
}

/* Accentkop — voor zware of onomkeerbare handelingen (iemand uit dienst
   zetten, een opdracht afsluiten). Niet voor gewone aanmaak/bewerk-acties:
   dat signaal verliest zijn betekenis als elke modal er zo uitziet.
   Kleuren komen overeen op .modal-header-accent zelf (achtergrond/rand) en op
   de twee subklassen .modal-icon/.modal-eyebrow erbinnen; wijzig ze samen. */
.modal-header-accent {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border-bottom-color: #e9d5ff;
}

.modal-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 18px;
}

.modal-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6d28d9;
  margin-bottom: 2px;
}

.modal-body { padding: 20px 24px; flex: 1; overflow-y: auto; min-height: 0; }

.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.modal-grid-full { grid-template-columns: 1fr; }

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px 20px;
  border-top: 0.5px solid var(--slate-100);
}

.modal-field-tip {
  display: block;
  font-size: 10px;
  font-weight: 500;
  margin-bottom: 4px;
  min-height: 14px;
  transition: color .15s;
}

/* ─────────────────────────────────────────
   Tabs — pill stijl
   Gebruik: tab-bar > tab-item (+ tab-item-active)
───────────────────────────────────────── */

.tab-bar {
  display: inline-flex;
  align-items: center;
  background: white;
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--slate-200);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  margin-bottom: 30px;
}

.tab-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-500);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, background .15s;
  user-select: none;
}

.tab-item:hover {
  color: var(--slate-800);
  background: var(--slate-50);
}

.tab-item-active {
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  color: #6366f1 !important;
  box-shadow: 0 1px 4px rgba(99,102,241,.15);
  font-weight: 600;
}

.tab-icon {
  width: 16px;
  height: 16px;
  opacity: .5;
  flex-shrink: 0;
}

.tab-item-active .tab-icon { opacity: 1; }

/* LineIcons variant — replaces SVG .tab-icon on settings tabs */
.tab-icon-lni {
  font-size: 16px;
  line-height: 1;
  opacity: .5;
  flex-shrink: 0;
}

.tab-item-active .tab-icon-lni { opacity: 1; color: #6366f1; }

.tab-count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--slate-100);
  color: var(--slate-500);
  transition: all .15s;
}

.tab-item-active .tab-count {
  background: #ede9fe;
  color: #6366f1;
}

.tab-bar-sm .tab-item { padding: 6px 12px; font-size: 12px; }
.tab-bar-lg .tab-item { padding: 10px 20px; font-size: 14px; }

@media (max-width: 640px) {
  .tab-bar {
    display: flex;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 16px;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-item { flex-shrink: 0; padding: 7px 12px; font-size: 12px; }
}
/* ─────────────────────────────────────────
   Info block — standaard informatieblok
   Gebruik: <div class="info-block"> <span class="info-block-icon"><i class="lni lni-information"></i></span> <div>…</div> </div>
───────────────────────────────────────── */
.info-block {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--slate-50);
  border-radius: 10px;
}
.info-block-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #dbeafe;
  flex-shrink: 0;
}
.info-block-icon i {
  font-size: 14px;
  color: #1d4ed8;
}
.info-block-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate-700);
  margin-bottom: 3px;
}
.info-block-body {
  font-size: 11px;
  color: var(--slate-400);
  line-height: 1.6;
}
/* ─────────────────────────────────────────
   Tooltips — Tippy.js workrlab theme
   Gebruikt door [data-tooltip], button[title] en a[title] via initTooltips()
───────────────────────────────────────── */

/* Workrlab dark theme */
.tippy-box[data-theme~='workrlab'] {
  background-color: #1e1b4b;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .01em;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25), 0 1px 4px rgba(0,0,0,.15);
}
.tippy-box[data-theme~='workrlab'] .tippy-content {
  padding: 6px 10px;
}
.tippy-box[data-theme~='workrlab'] .tippy-arrow {
  color: #1e1b4b;
}
/* Pijlkleur per richting */
.tippy-box[data-theme~='workrlab'][data-placement^='top']    > .tippy-arrow::before { border-top-color:    #1e1b4b; }
.tippy-box[data-theme~='workrlab'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: #1e1b4b; }
.tippy-box[data-theme~='workrlab'][data-placement^='left']   > .tippy-arrow::before { border-left-color:   #1e1b4b; }
.tippy-box[data-theme~='workrlab'][data-placement^='right']  > .tippy-arrow::before { border-right-color:  #1e1b4b; }

/* shift-away animatie */
.tippy-box[data-theme~='workrlab'][data-animation='shift-away'][data-state='hidden'] {
  opacity: 0;
}
.tippy-box[data-theme~='workrlab'][data-animation='shift-away'][data-state='hidden'][data-placement^='top']    { transform: translateY(6px);  }
.tippy-box[data-theme~='workrlab'][data-animation='shift-away'][data-state='hidden'][data-placement^='bottom'] { transform: translateY(-6px); }
.tippy-box[data-theme~='workrlab'][data-animation='shift-away'][data-state='hidden'][data-placement^='left']   { transform: translateX(6px);  }
.tippy-box[data-theme~='workrlab'][data-animation='shift-away'][data-state='hidden'][data-placement^='right']  { transform: translateX(-6px); }

/* sma-theme (market_analysis pagina — rijke HTML tooltips) */
.tippy-box[data-theme~='sma'] {
  background: #1e1b4b;
  color: #e0e7ff;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 1.6;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
}
.tippy-box[data-theme~='sma'] .tippy-content { padding: 9px 12px; }
.tippy-box[data-theme~='sma'] b,
.tippy-box[data-theme~='sma'] strong {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
  color: #a5b4fc;
}
.tippy-box[data-theme~='sma'][data-placement^='top']    > .tippy-arrow::before { border-top-color:    #1e1b4b; }
.tippy-box[data-theme~='sma'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: #1e1b4b; }
.tippy-box[data-theme~='sma'][data-placement^='left']   > .tippy-arrow::before { border-left-color:   #1e1b4b; }
.tippy-box[data-theme~='sma'][data-placement^='right']  > .tippy-arrow::before { border-right-color:  #1e1b4b; }


/* ─────────────────────────────────────────
   Page loader
───────────────────────────────────────── */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 55%, #0c0a1e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  overflow: hidden;
}
#page-loader.is-visible {
  opacity: 1;
  pointer-events: all;
}

/* Decoratieve gloed-orbs — pulsen direct zichtbaar */
.pl-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}
.pl-orb-1 {
  width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(139,92,246,.55) 0%, transparent 70%);
  top: -120px; right: -80px;
  animation: plOrbPulse 3s ease-in-out infinite;
}
.pl-orb-2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(99,102,241,.45) 0%, transparent 70%);
  bottom: -80px; left: -60px;
  animation: plOrbPulse 4s ease-in-out 1s infinite reverse;
}
.pl-orb-3 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(196,181,253,.35) 0%, transparent 70%);
  top: 40%; left: 10%;
  animation: plOrbPulse 2.5s ease-in-out .5s infinite;
}
/* Puls: schaal + opacity wisselen → direct merkbaar */
@keyframes plOrbPulse {
  0%, 100% { transform: scale(1);    opacity: .7; }
  50%       { transform: scale(1.18); opacity: 1;  }
}

.page-loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  user-select: none;
  position: relative;
  z-index: 1;
  animation: plContentIn .5s cubic-bezier(.22,1,.36,1) both;
}
/* Content verschijnt met fade+scale bij openen */
@keyframes plContentIn {
  from { opacity: 0; transform: scale(.88) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.page-loader-logo {
  height: 58px;
  width: auto;
  animation: plLogoPulse 2s ease-in-out .5s infinite;
}
/* Logo licht pulseren in helderheid — direct zichtbaar */
@keyframes plLogoPulse {
  0%, 100% { opacity: .85; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.04); }
}

.page-loader-tagline {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  color: rgba(167, 139, 250, .7);
  text-transform: uppercase;
  animation: plTagFade 1.2s ease .3s both;
}
@keyframes plTagFade {
  from { opacity: 0; letter-spacing: .06em; }
  to   { opacity: 1; letter-spacing: .18em; }
}

.page-loader-bar {
  width: 180px;
  height: 3px;
  background: rgba(255, 255, 255, .1);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.page-loader-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(139, 92, 246, 1) 35%,
    rgba(216, 180, 254, 1) 50%,
    rgba(139, 92, 246, 1) 65%,
    transparent 100%
  );
  animation: loader-shimmer 1.2s linear infinite;
  transform: translateX(-100%);
}
@keyframes loader-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}


/* ─────────────────────────────────────────
   Responsive components — ≤ 640px
───────────────────────────────────────── */

@media (max-width: 640px) {
  /* Modal past volledig in het scherm */
  .modal-overlay {
    padding: 12px;
    align-items: flex-end;
  }
  .modal-container,
  .modal-container-sm,
  .modal-container-lg {
    max-width: 100%;
    border-radius: 20px 20px 12px 12px;
    max-height: 92vh;
  }

  /* Buttons in modal footer op volledige breedte stapelen */
  .modal-footer {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .modal-footer .btn { width: 100%; justify-content: center; }

  /* Pill-search verticaal stapelen */
  .pill-search {
    flex-direction: column;
    gap: 0;
    border-radius: var(--radius-lg);
  }
  .pill-divider { display: none; }
  .pill-field { padding: 10px 14px; border-bottom: 1px solid var(--slate-100); }
  .pill-btn   { border-radius: 0 0 var(--radius-lg) var(--radius-lg); width: 100%; justify-content: center; }

  /* Tab-bar scrolt horizontaal */
  .tab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-item { white-space: nowrap; }

  /* Cards volle breedte */
  .card-sm { padding: 12px 14px; }
}

/* ── Presence avatar stack ───────────────────────────────────────────────── */
.wrl-pres-stack { display: inline-flex; align-items: center; }
.wrl-pres-av {
  position: relative;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: default;
}
.wrl-pres-stack .wrl-pres-av + .wrl-pres-av { margin-left: -7px; }
/* Visuele cirkel — apart element zodat overflow:hidden de tooltip ::before niet knipt */
.wrl-pres-circle {
  position: absolute; inset: 0;
  border-radius: 50%; overflow: hidden;
  border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
}
.wrl-pres-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wrl-pres-ini { color: #fff; font-size: 10px; font-weight: 700; line-height: 1; pointer-events: none; }
.wrl-pres-me .wrl-pres-circle { outline: 2px solid #c7d2fe; outline-offset: 1px; }