/* public/assets/css/panel-schema.css */
/* RecrewAI Panel UI Schema — shared tokens + components */
/* Doel: vacatures + inschrijvingen (en volgende menus) exact dezelfde look geven */

:root{
  /* typography */
  --ui-text:#111;
  --ui-muted:rgba(0,0,0,.65);
  --ui-muted2:rgba(0,0,0,.55);

  --fs-10:10.5px;
  --fs-12:12px;
  --fs-13:13px;
  --fs-16:16px;

  --fw-400:400;
  --fw-500:500; /* (nieuw) */
  --fw-600:600;
  --fw-700:700;
  --fw-800:800;
  --fw-900:900;

  /* sizes */
  --h-40:40px;
  --h-38:38px;
  --ico-18:18px;
  --btn-38:38px;

  /* radii */
  --r-12:12px;
  --r-14:14px;
  --r-16:16px;
  --r-18:18px;
  --r-pill:999px;

  /* borders/shadows */
  --bd-06:rgba(0,0,0,.06);
  --bd-08:rgba(0,0,0,.08);
  --bd-10:rgba(0,0,0,.10);

  --shadow-soft:0 6px 18px rgba(0,0,0,.06);
  --shadow-drawer:0 10px 24px rgba(0,0,0,.06);
  --shadow-modal:0 18px 60px rgba(0,0,0,.20);

  /* brand/status */
  --c-accent:#E65A2A;  /* oranje */
  --c-green:#10b981;
  --c-blue:#2563eb;
  --c-indigo:#6366f1;
  --c-red:#dc2626;
  --c-amber:#f59e0b;

  /* surfaces */
  --bg:#fff;
  --bg-soft:rgba(0,0,0,.03);
  --bg-muted:rgba(0,0,0,.05);
}

/* ===== Icons ===== */
.uiIco{width:var(--ico-18);height:var(--ico-18);display:block}

/* ===== Icon button ===== */
.uiIconBtn{
  width:var(--btn-38);height:var(--btn-38);
  border-radius:var(--r-pill);
  border:1px solid var(--bd-10);
  background:var(--bg);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.uiIconBtn:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)}
.uiIconBtn:active{transform:translateY(0)}
.uiIconBtn.danger{
  border-color:rgba(180,35,24,.25);
  background:rgba(180,35,24,.04);
}

/* ===== Mini button ===== */
.uiMiniBtn{
  border:1px solid var(--bd-10);
  background:var(--bg);
  border-radius:var(--r-pill);
  padding:9px 12px;
  cursor:pointer;
  font-weight:var(--fw-600);
  height:var(--h-40);
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.uiMiniBtn:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)}
.uiMiniBtn:active{transform:translateY(0)}
.uiMiniBtn.green{
  background:rgba(16,185,129,.12);
  border-color:rgba(16,185,129,.30);
  color:var(--ui-text);
}
.uiMiniBtn.dark{
  background:#111;
  border-color:#333;
  color:#fff;
}
.uiMiniBtn.dark:hover{
  background:#333;
  border-color:#555;
  color:#fff;
}

/* ===== Filter bar ===== */
.uiFilterRow{
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:nowrap;
  padding:10px 12px;
  border:1px solid var(--bd-06);
  background:var(--bg);
  border-radius:var(--r-16);
  overflow:hidden;
}
.uiFilterLeft{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.uiFilterRight{
  margin-left:auto;
  display:flex;align-items:flex-end;justify-content:flex-end;
  gap:12px;
  flex-wrap:nowrap;
}
.uiFilterDivider{
  width:1px;
  height:48px;
  background:var(--bd-08);
  border-radius:1px;
  margin:0 6px;
}
.uiGroup{display:flex;flex-direction:column;gap:6px}
.uiLabel{font-weight:var(--fw-600);font-size:var(--fs-12);opacity:.65}
.uiInput,.uiSelect{
  padding:9px 12px;
  border-radius:var(--r-14);
  border:1px solid var(--bd-08);
  background:var(--bg-soft);
  color:var(--text-main, #1a1a2e);
  outline:none;
  height:var(--h-40);
}
.uiInput::placeholder{color:var(--text-muted,#888)}
.uiSelect option, .uiInput option{background:#fff;color:#1a1a2e}
.uiInput{width:240px;max-width:240px}
.uiSelect{width:180px;max-width:180px}
.uiBtns{display:flex;gap:8px;align-items:center}

/* ===== Chips ===== */
.uiChips{display:flex;gap:8px;align-items:center;margin-left:auto;flex:0 0 auto}
.uiChip{
  border:1px solid var(--bd-10);
  border-radius:var(--r-pill);
  padding:0 12px;
  height:var(--h-40);
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-12);
  background:var(--bg);
  white-space:nowrap;
  opacity:.9;
  line-height:1;
  color:var(--ui-text);
}
.uiChip b{font-weight:var(--fw-700);color:var(--ui-text)}
.uiChip.muted{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.08);opacity:.85}
.uiChip.soft{background:rgba(230,90,42,.10);border-color:rgba(230,90,42,.18)}
.uiChip.ok{background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.18)}
.uiChip.purple{background:rgba(99,102,241,.10);border-color:rgba(99,102,241,.18)}
.uiChip.amber{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.18)}

/* ===== List shell ===== */
.uiListWrap{
  margin-top:12px;
  border:1px solid var(--bd-06);
  background:var(--bg);
  border-radius:var(--r-16);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.uiListTop{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--bd-06);
}
.uiListTitle{font-weight:var(--fw-900);font-size:var(--fs-16);color:var(--ui-text)}
.uiListMeta{opacity:.6;font-size:var(--fs-12)}

/* ===== Head/Row (grid headers & rows) ===== */
.uiHead{
  padding:10px 14px;
  border-bottom:1px solid var(--bd-06);
  font-size:var(--fs-10);
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.55;
  font-weight:var(--fw-700);
}
.uiRow{
  padding:10px 14px;
  border-bottom:1px solid var(--bd-08);
  font-size:var(--fs-12);
  min-height:56px;
  background:var(--bg);
}
.uiRow:hover{background:rgba(0,0,0,.025)}
.uiCell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uiCellTitle{font-weight:var(--fw-400);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uiCellSub{
  opacity:.65;
  font-size:var(--fs-12);
  line-height:14px;
  margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.uiActionsRow{
  display:flex;justify-content:flex-end;gap:8px;align-items:center;flex-wrap:nowrap;width:100%;
}
.uiEmpty{padding:16px;opacity:.65}

/* ===== NEW: Table component (voor inschrijvingen, later meer) ===== */
.uiTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.uiTable thead th{
  padding:10px 14px;
  border-bottom:1px solid var(--bd-06);
  font-size:var(--fs-10);
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.55;
  font-weight:var(--fw-700);
  white-space:nowrap;
  text-align:left;
}
.uiTable tbody td{
  padding:10px 14px;
  font-size:var(--fs-12);
  font-weight:var(--fw-400);
  border-bottom:1px solid var(--bd-08);
  vertical-align:middle;
}
.uiTable tbody tr:hover{background:rgba(0,0,0,.025)}
.uiTable tbody tr:last-child td{border-bottom:none}

.uiTaR{text-align:right}
.uiTaC{text-align:center}

/* ===== Online-by badge ===== */
.uiBadge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:var(--r-pill);
  background:var(--uBg, rgba(0,0,0,.05));
  border:1px solid var(--uBd, rgba(0,0,0,.10));
  color:var(--uTxt, #333);
  max-width:100%;
  white-space:nowrap;
}
.uiDot{width:9px;height:9px;border-radius:var(--r-pill);background:var(--uDot, rgba(0,0,0,.35))}
.uiBadgeName{color:var(--ui-text)!important;min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ===== Status text ===== */
.uiStatusTxt{font-weight:var(--fw-900);font-size:var(--fs-12);text-transform:lowercase}
.uiStatus--gepubliceerd{color:#0f6f4f}
.uiStatus--concept{color:var(--c-blue)}
.uiStatus--verlopen{color:var(--c-accent)}
.uiStatus--gesloten{color:var(--c-red)}

/* ===== Modal shell ===== */
.uiModalOverlay{
  position:fixed;inset:0;background:rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
  padding:16px;z-index:9999;
}
.uiModal{
  background:var(--bg);
  border-radius:var(--r-18);
  border:1px solid var(--bd-08);
  width:100%;
  max-height:88vh;
  overflow:auto;
  box-shadow:var(--shadow-modal);
  scrollbar-gutter:stable;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .uiFilterRow{flex-wrap:wrap}
  .uiInput,.uiSelect{width:100%;max-width:100%}
  .uiChips{margin-left:0;flex-wrap:wrap}
  .uiFilterLeft,.uiFilterRight{width:100%;flex-wrap:wrap}
  .uiFilterDivider{display:none}
}

/* ===== TABLET (≤768px) — gedeelde ATS-breed responsive basis ===== */
@media (max-width: 768px){
  .uiFilterRow{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .uiFilterLeft,.uiFilterRight{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    flex-wrap:wrap;
  }
  .uiInput,.uiSelect{width:100%;max-width:100%}
  .uiFilterDivider{display:none}
  .uiChips{margin-left:0;flex-wrap:wrap;width:100%}
  .uiListWrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .uiListTop{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ===== BLOG: allow compact filter controls without affecting other modules ===== */
.blogWrap .uiInput{
  width: 100%;
  max-width: 100%;
}
.blogWrap .uiSelect{
  width: 100%;
  max-width: 100%;
}

/* ===== MOBIEL (≤640px) ===== */
@media (max-width: 640px){
  .uiFilterRow{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .uiFilterLeft, .uiFilterRight{
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .uiInput, .uiSelect{
    width: 100% !important;
    max-width: 100% !important;
  }
  .uiFilterDivider{ display: none !important; }
  .uiChips{ margin-left: 0 !important; flex-wrap: wrap; }
  .uiListWrap{ overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .uiTable{ min-width: 500px; font-size: 12px !important; }
  .uiTable th, .uiTable td{ padding: 6px 8px !important; white-space: nowrap; }
  .uiCard{ padding: 10px !important; }
}

/* ===== KLEIN MOBIEL (≤480px) — kaarten/knoppen/pillen/tekst meeschalen ===== */
@media (max-width: 480px){
  [class*="Stat"], [class*="stat-card"], [class*="StatCard"], .dc-stat{
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  [class*="StatValue"], [class*="stat-value"]{ font-size: 16px !important; }
  button, [class*="Btn"], [class*="btn"]{
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
  [class*="vIconBtn"]{ min-width: 32px !important; height: 32px !important; }
  [class*="Chip"], [class*="chip"], [class*="Pill"], [class*="pill"]{
    font-size: 11px !important;
    padding: 3px 8px !important;
  }
  [class*="Card"]{ padding: 10px !important; }
  h1{ font-size: 18px !important; }
  h2{ font-size: 16px !important; }
  h3{ font-size: 14px !important; }
  .dc-stats{ grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  .dc-stat{ padding: 8px !important; }
  .dc-stat-icon{ font-size: 16px !important; }
  .dc-stat-value{ font-size: 15px !important; }
  .dc-stat-label{ font-size: 10px !important; }
}

/* ===== Overzichten binnen container scrollbaar houden (i.p.v. hele pagina te verbreden) ===== */
@media (max-width: 768px){
  .accWrap, .ilbWrap, .retro-wrap, .tableContainer, .modWrap{
    overflow-x: hidden;
    max-width: 100%;
    padding: 10px !important;
  }
  .accTable, .ilbTable, .dataTable, .retro-list-table-wrap table{
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .retro-list-table-wrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .orgX-table-wrap, .orgX-list-wrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .orgX-table-fixed, .orgX-table-compact, .orgX-table{
    table-layout: auto !important;
    min-width: 620px;
    font-size: 12px !important;
  }
  .kandFiltersGrid, .modToolbar.kandFiltersGrid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .mfBody{
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  .mfBody, .mfBody *{
    box-sizing: border-box;
  }
}

/* ===== Mobiele collapsible filters (generieke component, zie mobile-filters.js) ===== */
.mfToggleBtn{
  display: none;
}
@media (max-width: 768px){
  .mfToggleBtn{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #ea580c;
    cursor: pointer;
    margin-bottom: 8px;
  }
  .mfToggleBtn .mfChevron{
    transition: transform .2s ease;
    font-size: 11px;
  }
  .mfToggleBtn.mfOpen .mfChevron{ transform: rotate(180deg); }
  .mfBody.mfCollapsed{
    display: none !important;
  }
}


/* ===== Gedeeld component: sticky rij-acties knop (hamburger) =====
   Herbruikbare versie van het organisaties-patroon (.orgX-actions-cell/.orgX-menu-btn).
   Toepassen: laatste <td> van een rij krijgt class "rowActionsSticky", de knop
   erin class "rowActionsBtn" met een SVG-hamburger-icoon (oranje huiskleur). */
.rowActionsSticky{
  position: sticky;
  right: 0;
  background: #fff;
  width: 44px;
  text-align: right;
  box-shadow: -4px 0 8px -6px rgba(0,0,0,.15);
  z-index: 5;
}
table tbody tr:hover .rowActionsSticky{ background:#fcfdff; }
.rowActionsBtn{
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.9);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
}
.rowActionsBtn:hover{ background:#fff; border-color:#E1552C; }
.rowActionsBtn svg{ width:18px; height:18px; display:block; }
.rowActionsBtn svg line{ stroke:#E1552C; stroke-width:2.2; stroke-linecap:round; }
.rowActionsMenu{
  display:none;
  position:fixed;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  min-width:220px;
  z-index:99999;
  padding:6px;
}
.rowActionsWrap.open .rowActionsMenu{ display:block; }
.rowActionsRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; border-radius:12px; font-size:13px; font-weight:600; color:#334155; cursor:pointer; }
.rowActionsRow:hover{ background:#fff3ed; color:#E1552C; }
.rowActionsRow + .rowActionsRow{ border-top:1px solid rgba(0,0,0,.06); border-radius:0; }

/* ===== Alle hamburger-actieknoppen (3 strepen) app-breed oranje huiskleur =====
   Dekt: pipeline (.plMenuBtn img), hr_urenlijst (.plMenuBtn img), opdrachten (.uiIconBtn img),
   vacatures/inschrijvingen (.vIconBtn img), en elke overige menu.png-hamburger-icoon.
   Referentie-kleur: zelfde filter als organisaties.css .orgX-ico */
.plMenuBtn img,
.vIconBtn img,
.uiIconBtn img,
.rowActionsBtn img,
.rl-menu-btn img,
img.uiIco[src*="menu.png"],
img.rl-ico[src*="menu.png"],
img[src*="menu.png"] {
  filter: brightness(0) saturate(100%) invert(45%) sepia(85%) saturate(1900%) hue-rotate(345deg) brightness(98%) contrast(92%);
}

/* ===== Hamburger-acties-kolom altijd zichtbaar houden bij horizontaal scrollen =====
   Generieke sticky-fallback voor modules die de knop nog niet in een sticky wrapper hebben. */
.pl-menu-td,
.rowMenuWrap,
.opdMenuWrap,
.rl-actions-cell,
.hrActCell {
  position: sticky;
  right: 0;
  background: var(--bg,#fff);
  z-index: 5;
  box-shadow: -4px 0 8px -6px rgba(0,0,0,.15);
}

/* ===== Sticky Acties-KOLOM (TH + TD) app-breed =====
   Referentiepatroon: retrospective.css (.retro-list-table th:last-child + .rl-actions-cell).
   Zorgt dat bij horizontaal scrollen de volledige kolom (header + cellen) rechts vastzit
   i.p.v. alleen de knop, zodat het dropdown-menu niet achter andere kolommen valt. */
.accTable th:last-child,
.ilbTable th:last-child,
.ub-table th:last-child,
.dataTable th:last-child,
.dashTable th:last-child,
.dc-table th:last-child,
.plTbl th:last-child,
.uiTable th.col-menu,
.uiTable th.col-actions {
  position: sticky;
  right: 0;
  background: #f8fafc;
  z-index: 6;
}
.accTable td:last-child,
.ilbTable td:last-child,
.ub-table td:last-child,
.dataTable td:last-child,
.dashTable td:last-child,
.dc-table td:last-child,
.plTbl td:last-child {
  position: sticky;
  right: 0;
  background: #fff;
  z-index: 5;
  box-shadow: -4px 0 8px -6px rgba(0,0,0,.15);
}
.accTable tbody tr:hover td:last-child,
.ilbTable tbody tr:hover td:last-child,
.ub-table tbody tr:hover td:last-child,
.dataTable tbody tr:hover td:last-child,
.dashTable tbody tr:hover td:last-child,
.dc-table tbody tr:hover td:last-child,
.plTbl tbody tr:hover td:last-child {
  background: #f8fafc;
}
/* uiTable-modules zonder col-menu/col-actions klasse op de th (inschrijvingen, kandidaten) */
.uiTable th:last-child {
  position: sticky;
  right: 0;
  background: #f8fafc;
  z-index: 6;
}
.uiTable td:last-child {
  position: sticky;
  right: 0;
  background: #fff;
  z-index: 5;
  box-shadow: -4px 0 8px -6px rgba(0,0,0,.15);
}
.uiTable tbody tr:hover td:last-child { background: #f8fafc; }
/* vacatures.js gebruikt CSS-grid i.p.v. table (.gridHead/.gridRow); header-cel Acties sticky maken
   zodat header meebeweegt met de reeds-sticky .cellActionsSticky rij-cel bij horizontaal scrollen. */
.gridHead .cell:last-child {
  position: sticky;
  right: 0;
  background: #f8fafc;
  z-index: 6;
}

/* Custom searchable dropdown */
.customDropItem:hover { background: #fff3ef !important; color: #E1552C; }
.customDropList { font-size: 14px; }

/* Paginering vacatures lijst */
.vacPagination { display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding:8px 0 12px; justify-content:center; }
.pagBtn { min-width:30px; height:30px; padding:0 8px; border:1.5px solid #ddd; border-radius:6px; background:#fff; color:#333; font-size:0.82rem; font-weight:600; cursor:pointer; font-family:inherit; transition:background .15s,border-color .15s; }
.pagBtn:hover:not([disabled]) { background:#fff3ed; border-color:#E1552C; color:#E1552C; }
.pagBtn.is-active { background:#E1552C; border-color:#E1552C; color:#fff; pointer-events:none; }
.pagBtn[disabled] { opacity:.35; cursor:default; }
.pagEllipsis { padding:0 4px; color:#999; }
.pagInfo { margin-left:8px; font-size:0.8rem; color:#888; }

/* ===== Gedeelde stat-kaart mobiele media queries =====
   Uniformeert .dashCard, .statCard en .dashGrid op tablet/mobiel
   (referentie: pipeline.css #mod-pipeline .dashCard — padding 8px/56px op 768px, 6px/50px op 480px) */
@media (max-width: 768px) {
  .dashGrid {
    gap: 6px;
    margin-bottom: 10px;
  }
  .dashCard {
    padding: 8px 8px;
    min-height: 56px;
  }
  .dashCard__label, .dashCardTitle { font-size: 9px; }
  .dashCard__value, .dashValue { font-size: 13px; }
  .statCard {
    padding: 8px 10px;
    min-height: 56px;
  }
  .statCard .statNum { font-size: 18px; }
  .statCard .statLabel { font-size: 10px; }
}
@media (max-width: 480px) {
  .dashGrid { gap: 4px; }
  .dashCard {
    padding: 6px 6px;
    min-height: 50px;
  }
  .dashCard__label, .dashCardTitle { font-size: 8.5px; }
  .dashCard__value, .dashValue { font-size: 12px; }
  .statCard {
    padding: 6px 8px;
    min-height: 50px;
  }
  .statCard .statNum { font-size: 16px; }
  .statCard .statLabel { font-size: 9px; }
}

/* ===== Gedeeld component: generieke centraal-gepositioneerde modal (.pl-modal)
   Was alleen gedefinieerd in pipeline.css; hier globaal beschikbaar gemaakt
   zodat elke module (bv. gebruiker_beheer "Nieuwe gebruiker" modal) hem
   correct centraal/overlay toont ipv onderaan de pagina te renderen. */
.pl-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
}
.pl-modal-bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}
.pl-modal-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pl-modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8f9fa;
}
.pl-modal-x {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 0 4px;
  color: #6b7280;
}
.pl-modal-x:hover {
  color: #111;
}
.pl-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.pl-modal-footer {
  padding: 16px 20px;
  border-top: 1px solid #e8e8e8;
  display: flex;
  gap: 10px;
}
@media (max-width: 600px) {
  .pl-modal-box { width: 94%; max-height: 92vh; }
}

/* ===== Vaste breedte acties-kolom overal gelijk (zelfde als organisaties-menu: 44px) ===== */
.rowActionsSticky,
.rowActionsCell,
.orgX-actions-cell,
.blogTableFixed td.col-actions,
.blogTableFixed col.col-actions,
.opdTableFixed .col-menu,
.hrActCell,
.rl-actions-cell,
.layoutTableFixed .col-actions,
#mod-pipeline .pl-menu-td{
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
}