/* JIBSER Web-App UI kit — shared component styles */
@import url('../../colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg-app); font-family: var(--ff-sans); color: var(--fg-default); }

/* ---------- Layout chrome ---------- */
.app { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; }

.sidebar {
  background: var(--bg-sidebar); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 100vh; position: sticky; top: 0;
}
.sidebar-top { padding: 0; }
.sidebar-logo { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.sidebar-logo img { height: 24px; }
.sidebar .ic-btn { width: 20px; height: 20px; filter: invert(1); opacity: .9; cursor: pointer; }

.sidebar-section { padding: 8px 16px; }
.sb-new {
  height: 40px; width: 100%;
  background: transparent; color: #fff;
  border: 1px solid #fff; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 14px var(--ff-sans); cursor: pointer;
}
.sb-new img { width: 16px; height: 16px; filter: invert(1); }

.sb-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 8px; margin: 2px 0;
  font: 400 14px var(--ff-sans); color: #fff; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out-soft);
}
.sb-item:hover { background: rgba(255,255,255,0.06); }
.sb-item.active { background: rgba(255,255,255,0.10); }
.sb-item img { width: 20px; height: 20px; filter: invert(1); }
.sb-item .grow { flex: 1; }
.sb-item .chev { width: 20px; height: 20px; filter: invert(1); opacity: .8; }

.sb-group { border-top: 1px solid rgba(255,255,255,0.16); border-bottom: 1px solid rgba(255,255,255,0.16); }
.sb-sub {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 10px 28px;
  font: 400 14px var(--ff-sans); color: #fff; cursor: pointer;
}
.sb-sub:hover { background: rgba(255,255,255,0.04); }
.sb-sub .kind {
  font: 400 11px var(--ff-sans); padding: 4px 8px; border-radius: 3.81px;
  color: #fff; background: rgba(75,119,246,0.32);
}

.sb-avatar { width: 32px; height: 32px; border-radius: 9999px; background:
  linear-gradient(135deg,#FF621B,#B53E06); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 12px var(--ff-sans); color: #fff;
}

/* ---------- Topbar ---------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 56px; background: #fff;
  border-bottom: 1px solid var(--border-default);
  display: flex; align-items: stretch; justify-content: space-between;
  position: sticky; top: 0; z-index: 5;
}
.topbar .tabs { display: flex; padding: 0 24px; gap: 4px; align-items: center; }
.tb-tab {
  height: 56px; padding: 0 16px;
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 14px var(--ff-sans); color: var(--fg-default);
  cursor: pointer; border-bottom: 2px solid transparent;
}
.tb-tab.active { background: var(--jib-navy); color: #fff; border-radius: 0; }
.tb-tab.active img { filter: invert(1); }
.tb-tab img { width: 16px; height: 16px; }
.tb-tab .badge-sm {
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--jib-orange); color: #fff;
  border-radius: 9999px; font: 500 11px var(--ff-numeric);
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar .right { display: flex; align-items: center; gap: 6px; padding: 0 24px; border-left: 1px solid var(--border-default); }
.tb-iconbtn {
  height: 32px; padding: 0 10px; border-radius: 8px;
  border: none; background: transparent;
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 14px var(--ff-sans); color: var(--fg-default); cursor: pointer;
  position: relative;
}
.tb-iconbtn:hover { background: var(--jib-gray-50); }
.tb-iconbtn img { width: 16px; height: 16px; }
.tb-iconbtn .badge-sm { position: relative; top: 0; margin-left: 2px; }

/* ---------- Generic buttons ---------- */
.btn {
  height: 40px; padding: 0 16px; border-radius: 8px;
  border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 14px var(--ff-sans);
  transition: filter var(--dur-fast), background var(--dur-fast);
}
.btn img { width: 16px; height: 16px; }
.btn-primary { background: var(--jib-orange); color: #fff; border-color: var(--jib-orange); }
.btn-primary:hover { filter: brightness(.95); }
.btn-primary img { filter: invert(1); }
.btn-secondary { background: #fff; color: var(--fg-default); border-color: var(--border-default); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--jib-gray-50); }
.btn-ghost { background: transparent; color: var(--fg-default); }
.btn-ghost:hover { background: var(--jib-gray-50); }
.btn-destructive { background: #fff; color: var(--jib-danger); border-color: var(--border-default); }
.btn-destructive img { filter: invert(49%) sepia(93%) saturate(1352%) hue-rotate(323deg) brightness(92%); }

.icon-btn {
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--border-default); background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn img { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--jib-gray-50); }

/* ---------- Status badge ---------- */
/* Status and chip share the SAME pill geometry: 28px tall, radius 6, 14/400 type.
   Difference is semantic: status = colored pill with icon; chip = small meta tag. */
.status-badge {
  height: 28px; padding: 0 10px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px var(--ff-ui); color: #fff;
}
.status-badge img { width: 14px; height: 14px; filter: invert(1); }
.status-launched { background: var(--jib-navy-chip); }
.status-finished { background: var(--jib-success); }
.status-paused   { background: var(--jib-gray-500); }
.status-wip      { background: var(--jib-blue-500); }
.status-draft    { background: var(--jib-gray-100); color: var(--jib-navy); }
.status-draft img { filter: none; }

/* ---------- Chips ---------- */
/* Campaign-type chip — matches status-badge geometry for visual rhythm on the card row */
.chip {
  height: 28px; padding: 0 10px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 13px var(--ff-sans);
  color: var(--jib-navy);
  background: var(--jib-gray-100);
  border: 1px solid var(--border-default);
}
.chip-dot { width: 6px; height: 6px; border-radius: 9999px; flex: none; }
.chip-specifiek { color: #B53E06; background: #FFF0E8; border-color: #FFD4BE; }
.chip-specifiek .chip-dot { background: var(--jib-orange); }
.chip-hybrid    { color: #123393; background: #E9F0FF; border-color: #C9D8FF; }
.chip-hybrid .chip-dot    { background: var(--jib-blue-500); }
.chip-snel      { color: #0F6B3A; background: #E7F7EE; border-color: #C1E9D3; }
.chip-snel .chip-dot      { background: var(--jib-success); }
/* legacy "category" chip — kept for ad preview etc */
.chip-cat { background: var(--jib-blue-500); color: #fff; border: none; }
/* soft filter chip — bigger radius, used in toolbar filter rows */
.chip-soft { background: var(--jib-gray-100); color: var(--jib-navy); border-radius: 8px; padding: 6px 12px; height: auto; font-size: 13px; border: 1px solid transparent; }

/* ---------- Media-budget nav widget (sidebar) ---------- */
/* Lives inside the navy sidebar. Translucent blue panel; folded = header only. */
.mb {
  background: rgba(75,119,246,0.24);
  border-radius: 8px; padding: 12px; color: #fff;
}
.mb-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mb-hd-l { display: flex; align-items: center; gap: 12px; font: 400 14px var(--ff-sans); }
.mb-hd-l img { width: 20px; height: 20px; filter: invert(1); }
.mb-chev { width: 20px; height: 20px; filter: invert(1); opacity: .9; cursor: pointer; }
.mb-bar {
  height: 8px; border-radius: 1px; margin: 16px 0;
  background: var(--jib-gray-100);
  border: .5px solid rgba(255,255,255,0.32);
  display: flex; overflow: hidden;
}
.mb-bar .seg-spent { background: var(--jib-blue-500); }
.mb-bar .seg-res   { background: var(--jib-orange); }
.mb-rows { display: flex; flex-direction: column; gap: 12px; }
.mb-row  { display: flex; align-items: baseline; justify-content: space-between; font: 400 14px var(--ff-sans); color: #fff; }
.mb-row .v { font: 400 14px var(--ff-sans); }
.mb-row .v-spent { color: var(--jib-blue-500); }
.mb-row .v-res   { color: var(--jib-orange); }
.mb-total {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.32);
  font: 400 14px var(--ff-sans); color: var(--jib-gray-100);
}
.mb-foot { display: flex; justify-content: space-between; margin-top: 14px; }
.mb-foot a { font: 400 12px var(--ff-sans); color: #fff; text-decoration: underline; cursor: pointer; }

/* ---------- Card ---------- */
.card {
  background: #fff; border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-body { padding: 12px 16px; }

/* ---------- Content ---------- */
.content { padding: 24px; flex: 1; min-width: 0; }
.content-wrap { max-width: var(--content-max); margin: 0 auto; }

/* ---------- Table / grid ---------- */
.grid-campaigns { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 1280px){ .grid-campaigns { grid-template-columns: 1fr; } }

/* ---------- Sort / filters button (shared with FilterChips/SortButton) ---------- */
.sort {
  height: 36px; padding: 0 12px; border: 1px solid var(--border-default); background:#fff;
  border-radius: 8px; display:inline-flex; align-items:center; gap:8px;
  font: 500 13px var(--ff-sans); color: var(--fg-default); cursor: pointer;
}
.sort:hover { background: var(--jib-gray-50); }
.chip-soft { cursor: pointer; transition: background var(--dur-fast); }
.chip-soft:hover { background: var(--jib-gray-150); }

/* ---------- Stepper ---------- */
.stepper {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border:1px solid var(--border-default); border-radius: 8px;
  padding: 6px; width: fit-content;
}
.st-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font: 500 13px var(--ff-sans); color: var(--fg-muted); border-radius: 6px; }
.st-item.done { color: var(--jib-success); }
.st-item.active { background: var(--jib-navy); color: #fff; }
.st-sep { color: var(--jib-gray-400); font-size: 14px; }

/* ---------- Panels (used on strategy/builder surfaces) ---------- */
.panel { background:#fff; border:1px solid var(--border-default); border-radius: 12px; padding: 24px; }
.panel + .panel { margin-top: 16px; }
.panel h2 { margin: 0 0 4px; font: 600 20px var(--ff-sans); color: var(--fg-default); display:flex; align-items:center; gap:8px; }
.panel .intro { margin: 0 0 20px; font: 400 14px var(--ff-sans); color: var(--fg-muted); max-width: 620px; }
.panel .hdr { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom: 16px; }
.panel .hdr .actions { display:flex; gap:8px; flex: none; }

/* ---------- Insight card ---------- */
.insight {
  border: 1px solid var(--border-default); border-radius: 10px; padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  background: #fff;
}
.insight .ttl { display: flex; align-items: center; gap: 8px; font: 600 14px var(--ff-sans); color: var(--fg-default); }
.insight .body { font: 400 13px var(--ff-sans); color: var(--fg-muted); line-height: 1.5; }
.insight.primary { border-color: #0F093C; }
.insight.primary .ttl { color: #0F093C; }

/* ---------- Bullets ---------- */
.bullets { display: flex; flex-direction: column; gap: 10px; }
.bullet { display: flex; gap: 10px; align-items: flex-start; }
.bullet .ic { width: 22px; height: 22px; border-radius: 9999px; background: var(--jib-gray-50); flex: none; display:inline-flex; align-items:center; justify-content:center; }
.bullet .tx { font: 400 14px var(--ff-sans); color: var(--fg-default); line-height: 1.55; }
.bullet .tx b { font-weight: 600; }

/* ---------- Goal banner ---------- */
.goal {
  display:flex; align-items:center; gap: 14px;
  background: var(--jib-navy); color:#fff;
  border-radius: 12px; padding: 16px 20px;
}
.goal .big { font: 700 40px var(--ff-sans); color: var(--jib-orange); letter-spacing:-0.02em; line-height:1; }
.goal .lbl { font: 500 13px var(--ff-sans); opacity:.85; }
.goal .desc { font: 400 13px var(--ff-sans); opacity:.75; max-width: 420px; margin-top: 2px; }
.goal-meta { display:flex; flex-direction:column; gap:2px; }

/* ---------- Preview card ---------- */
.preview-card {
  background:#fff; border:1px solid var(--border-default); border-radius: 12px; overflow: hidden;
}
.preview-card .tabs { display: flex; border-bottom: 1px solid var(--border-default); }
.preview-card .tb {
  flex: 1; padding: 12px; text-align:center; font: 500 13px var(--ff-sans); color: var(--fg-muted); cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.preview-card .tb.active { color: var(--fg-default); border-bottom-color: var(--jib-orange); }

/* ---------- Ad (social media preview) ---------- */
.ad-frame { padding: 16px; background: var(--jib-gray-50); }
.ad { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-md); }
.ad .ad-hdr { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.ad .ad-who { display: flex; flex-direction: column; line-height: 1.2; flex:1; }
.ad .ad-who b { font: 600 13px var(--ff-sans); color: var(--fg-default); }
.ad .ad-who span { font: 400 11px var(--ff-numeric); color: var(--fg-muted); }
.ad .ad-copy { padding: 0 12px 10px; font: 400 13px var(--ff-sans); color: var(--fg-default); line-height: 1.45; }
.ad .ad-img { aspect-ratio: 4/3; position: relative; overflow:hidden; }
.ad .ad-img .caption {
  position:absolute; inset: auto 0 0 0; padding: 14px;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
  color:#fff; font: 700 22px var(--ff-sans); line-height: 1.1;
}
.ad .ad-cta {
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 12px; border-top: 1px solid var(--border-default);
  font: 500 13px var(--ff-sans); color: var(--fg-default);
}
.ad .ad-cta .btn-mini { background: var(--jib-orange); color:#fff; border-radius: 6px; padding: 6px 10px; font: 600 12px var(--ff-sans); }
.ad .ad-meta { display:flex; justify-content:space-between; padding:10px 12px; font: 400 11px var(--ff-numeric); color: var(--fg-muted); }

/* ============================================================
   EXTENDED COMPONENT LIBRARY (form controls, menus, comments…)
   ============================================================ */

/* ---------- Checkbox ---------- */
.cbx { width:20px; height:20px; border-radius:4px; background:#fff; border:1.5px solid var(--jib-navy);
  display:inline-flex; align-items:center; justify-content:center; flex:none; cursor:pointer; }
.cbx img { width:13px; height:13px; filter:invert(1) brightness(2); opacity:0; }
.cbx.on { background:var(--jib-navy); }
.cbx.on img { opacity:1; }
.cbx-row { display:inline-flex; align-items:center; gap:10px; font:400 14px var(--ff-sans); color:var(--fg-default); cursor:pointer; }

/* ---------- Radio ---------- */
.rdo { width:20px; height:20px; border-radius:9999px; background:#fff; border:1.5px solid var(--jib-gray-400);
  display:inline-flex; align-items:center; justify-content:center; flex:none; cursor:pointer; }
.rdo.on { border-color:var(--jib-navy); }
.rdo.on::after { content:''; width:10px; height:10px; border-radius:9999px; background:var(--jib-navy); }
.rdo-row { display:inline-flex; align-items:center; gap:10px; font:400 14px var(--ff-sans); color:var(--fg-default); cursor:pointer; }

/* ---------- Switch (on/off pill) ---------- */
.sw { width:42px; height:24px; border-radius:9999px; background:var(--jib-gray-400); position:relative; flex:none; cursor:pointer; transition:background var(--dur-fast); }
.sw::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:9999px; background:#fff; transition:left var(--dur-base) var(--ease-out-soft); box-shadow:var(--shadow-xs); }
.sw.on { background:var(--jib-blue-500); }
.sw.on::after { left:20px; }
.sw-row { display:inline-flex; align-items:center; gap:10px; font:400 14px var(--ff-sans); color:var(--fg-default); cursor:pointer; }

/* ---------- Slider ---------- */
.sld { display:flex; flex-direction:column; gap:8px; }
.sld-track { position:relative; height:4px; border-radius:9999px; background:var(--jib-gray-100); }
.sld-fill { position:absolute; left:0; top:0; height:100%; border-radius:9999px; background:var(--jib-navy); }
.sld-knob { position:absolute; top:50%; width:16px; height:16px; border-radius:9999px; background:#fff; border:2px solid var(--jib-navy); transform:translate(-50%,-50%); box-shadow:var(--shadow-sm); }
.sld-scale { display:flex; justify-content:space-between; font:400 13px var(--ff-numeric); color:var(--fg-muted); }
.sld-scale .cur { color:var(--jib-navy); font-weight:500; }

/* ---------- Removable chip (token with X) ---------- */
.rchip { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 8px 0 14px;
  border:1px solid var(--border-strong); border-radius:8px; background:#fff;
  font:500 14px var(--ff-sans); color:var(--fg-default); }
.rchip .x { width:18px; height:18px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.rchip .x img { width:14px; height:14px; }
.rchip-tag { padding-left:6px; }
.rchip .jtag { font:600 11px var(--ff-sans); color:#fff; background:var(--jib-orange); border-radius:4px; padding:3px 7px; }
.rchip .jtag.not { background:var(--jib-gray-100); color:var(--jib-gray-500); }

/* ---------- Select field ---------- */
.field-lbl { font:500 13px var(--ff-sans); color:var(--jib-navy); margin-bottom:6px; display:block; }
.select { height:44px; border:1px solid var(--border-default); border-radius:8px; background:#fff;
  display:flex; align-items:center; justify-content:space-between; padding:0 14px;
  font:400 14px var(--ff-sans); color:var(--fg-default); cursor:pointer; }
.select.open { border-color:var(--jib-blue-500); box-shadow:0 0 0 3px rgba(75,119,246,0.14); }
.select img { width:18px; height:18px; opacity:.6; }

/* ---------- Dropdown menu ---------- */
.menu { background:#fff; border:1px solid var(--border-default); border-radius:12px; box-shadow:var(--shadow-lg); padding:6px; overflow:hidden; }
.menu-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; cursor:pointer; font:400 14px var(--ff-sans); color:var(--fg-default); }
.menu-item:hover { background:var(--jib-gray-50); }
.menu-item .chk { width:16px; height:16px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
.menu-item .chk img { width:16px; height:16px; filter:invert(28%) sepia(89%) saturate(1400%) hue-rotate(205deg) brightness(95%); opacity:0; }
.menu-item.sel .chk img { opacity:1; }
.menu-item .meta { margin-left:auto; display:flex; gap:18px; font:400 13px var(--ff-numeric); color:var(--fg-muted); white-space:nowrap; }
.jtag { font:600 11px var(--ff-sans); color:#fff; background:var(--jib-orange); border-radius:4px; padding:3px 7px; flex:none; }
.jtag.not { background:var(--jib-gray-100); color:var(--jib-gray-500); }

/* ---------- Sub-tab pills (Meta/Google/LinkedIn) ---------- */
.subtabs { display:inline-flex; gap:8px; border-bottom:1px solid var(--border-default); padding-bottom:0; }
.subtab { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:8px;
  font:500 14px var(--ff-sans); color:var(--fg-default); cursor:pointer;
  border:1px solid var(--border-strong); background:#fff; }
.subtab:hover { background:var(--jib-gray-50); }
.subtab img { width:18px; height:18px; }
.subtab.active { background:var(--jib-navy); color:#fff; border-color:var(--jib-navy); }
.subtab.active img { filter:invert(1) brightness(2); }

/* ---------- Settings accordion list ---------- */
.acc { display:flex; flex-direction:column; }
.acc-row { padding:18px 20px; border-left:3px solid transparent; cursor:pointer; }
.acc-row + .acc-row { border-top:1px solid var(--border-default); }
.acc-row .t { font:600 16px var(--ff-sans); color:var(--fg-default); margin-bottom:4px; }
.acc-row .d { font:400 13px var(--ff-sans); color:var(--fg-muted); line-height:1.45; max-width:280px; }
.acc-row.active { background:rgba(75,119,246,0.10); border-left-color:var(--jib-blue-500); }

/* ---------- Counter badge ---------- */
.counter { min-width:20px; height:20px; padding:0 6px; border-radius:9999px; background:var(--jib-orange); color:#fff;
  font:500 11px var(--ff-numeric); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.counter.blue { background:var(--jib-blue-500); }

/* ---------- Icon badge (campaign type) ---------- */
.ibadge { display:inline-flex; align-items:center; gap:6px; height:20px; padding:0 6px; border-radius:3.81px;
  background:var(--jib-blue-500); color:#fff; font:400 12px var(--ff-sans); }
.ibadge img { width:12px; height:12px; filter:invert(1) brightness(2); }

/* ---------- Approval toggle (Alles goedkeuren) ---------- */
.appr { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:6px;
  font:400 14px var(--ff-sans); cursor:pointer; }
.appr img { width:16px; height:16px; }
.appr.on  { background:var(--jib-success); color:#fff; }
.appr.on img { filter:invert(1) brightness(2); }
.appr.off { background:#fff; color:var(--jib-success); border:1px solid var(--jib-success); }
.appr.off img { filter:invert(58%) sepia(60%) saturate(450%) hue-rotate(95deg) brightness(92%); }

/* ---------- Toggle-button (icon select, e.g. platform 1/3) ---------- */
.tbtn { height:32px; min-width:32px; padding:0 8px; border-radius:6px; background:#fff; border:1px solid var(--border-default);
  display:inline-flex; align-items:center; gap:8px; justify-content:center; cursor:pointer; font:400 14px var(--ff-sans); color:var(--jib-navy); }
.tbtn img { width:18px; height:18px; }
.tbtn.sel { border-color:var(--jib-navy); }

/* ---------- Input with character counter ---------- */
.ta { border:1px dashed var(--border-strong); border-radius:6px; padding:8px 10px; font:400 14px var(--ff-sans); color:var(--fg-default); line-height:1.4; }
.ta.err { border-color:var(--jib-danger); }
.counter-hint { font:400 12px var(--ff-numeric); color:var(--fg-muted); margin-top:6px; display:flex; align-items:center; gap:6px; }
.counter-hint.err { color:var(--jib-danger); }
.counter-hint img { width:14px; height:14px; }

/* ---------- Upload dropzone ---------- */
.dropzone { border:1.5px dashed var(--border-strong); border-radius:10px; background:var(--jib-gray-50);
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:28px 20px; text-align:center; cursor:pointer; }
.dropzone img.up { width:24px; height:24px; opacity:.7; }
.dropzone .dz-t { font:500 14px var(--ff-sans); color:var(--jib-navy); }
.dropzone .dz-h { font:400 12px var(--ff-numeric); color:var(--fg-muted); }

/* ---------- Tabs primary (Preview / Samenvatting) ---------- */
.tabsp { display:inline-flex; gap:8px; align-items:center; }
.tabp { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 10px; border-radius:6px;
  font:400 14px var(--ff-sans); color:var(--jib-navy); cursor:pointer;
  border:1px solid var(--border-strong); background:#fff; }
.tabp:hover { background:var(--jib-gray-50); }
.tabp img { width:16px; height:16px; }
.tabp.sel { background:var(--jib-navy); color:#fff; border-color:var(--jib-navy); }
.tabp.sel img { filter:invert(1) brightness(2); }

/* ---------- Comments panel ---------- */
.cmts { width:300px; background:#fff; border:1px solid var(--border-default); border-radius:12px; overflow:hidden; }
.cmts-hd { display:flex; align-items:center; gap:8px; padding:12px; }
.cmts-hd .title { display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 10px; border-radius:6px; background:var(--jib-navy); color:#fff; font:500 14px var(--ff-sans); }
.cmts-hd .title img { width:16px; height:16px; filter:invert(1) brightness(2); }
.cmts-hd .hicon { width:32px; height:32px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; position:relative; }
.cmts-hd .hicon img { width:18px; height:18px; }
.cmts-body { padding:0 12px 12px; display:flex; flex-direction:column; gap:16px; }
.cmt { display:flex; flex-direction:column; gap:6px; }
.cmt-hd { display:flex; align-items:center; gap:8px; }
.cmt-hd .nm { font:600 14px var(--ff-sans); color:var(--fg-default); }
.cmt-hd .tm { font:400 13px var(--ff-numeric); color:var(--fg-muted); }
.cmt-hd .st { margin-left:auto; display:inline-flex; align-items:center; }
.cmt-hd .dot { width:10px; height:10px; border-radius:9999px; background:var(--jib-success); }
.cmt-hd .st img { width:18px; height:18px; opacity:.6; }
.cmt-body { font:400 14px var(--ff-sans); color:var(--fg-default); line-height:1.5; }
.cmt-reply { height:40px; border:1px solid var(--jib-slate-500); border-radius:8px; display:flex; align-items:center; padding:0 12px; font:400 14px var(--ff-sans); color:var(--jib-slate-500); }

/* ---------- Comment composer ---------- */
.composer { display:flex; align-items:center; gap:8px; }
.composer .ava-ic { width:40px; height:40px; flex:none; display:inline-flex; align-items:center; justify-content:center; }
.composer .ava-ic img { width:40px; height:40px; }
.composer .box { flex:1; height:40px; border:1px solid var(--jib-slate-500); border-radius:8px; display:flex; align-items:center; padding:0 4px 0 12px; }
.composer .box input { flex:1; border:0; outline:0; font:400 14px var(--ff-sans); color:var(--fg-default); background:transparent; }
.composer .box input::placeholder { color:var(--jib-slate-500); }
.composer .send { width:36px; height:36px; border-radius:6px; background:var(--jib-navy); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; flex:none; }
.composer .send img { width:16px; height:16px; filter:invert(1) brightness(2); }
.composer .send.orange { background:var(--jib-orange); }

/* ---------- Strategy-type card (Specifiek) — expanded / folded ---------- */
.scard { border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lg); }

/* Expanded (blue) */
.scard-exp { width:360px; background:var(--jib-blue-500); color:#fff; }
.scard-exp .sc-hd { padding:24px 24px 20px; text-align:center; }
.scard-exp .sc-ttl { display:flex; align-items:center; justify-content:center; gap:8px; font:600 22px var(--ff-sans); }
.scard-exp .sc-ttl img { width:22px; height:22px; filter:invert(1) brightness(2); }
.scard-exp .sc-sub { margin-top:8px; font:400 15px var(--ff-sans); line-height:1.42; color:rgba(255,255,255,0.92); }
.scard-exp .sc-rows { display:flex; flex-direction:column; }
.scard-exp .sc-row { min-height:56px; padding:9px 20px; display:flex; align-items:center; gap:12px; }
.scard-exp .sc-row + .sc-row { border-top:1px solid rgba(255,255,255,0.14); }
.scard-exp .sc-or { font:400 14px var(--ff-sans); color:rgba(255,255,255,0.9); flex:none; }
.scard-exp .sc-check { justify-content:center; }
.scard-exp .sc-foot { padding:16px 20px 20px; }
.scard-exp .sc-cta { width:100%; height:48px; border:0; border-radius:8px; background:var(--jib-navy-deep); color:#fff;
  font:500 16px var(--ff-sans); display:inline-flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; }
.scard-exp .sc-cta img { width:18px; height:18px; filter:invert(1) brightness(2); }

/* "Geautomatiseerd" automation pill */
.auto-pill { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px; flex:none;
  background:#fff; border:1.5px solid var(--jib-blue-300); border-radius:8px;
  font:500 14px var(--ff-sans); color:var(--jib-navy); white-space:nowrap; cursor:pointer; }
.auto-pill.plain { border-color:transparent; }
.auto-pill img { width:18px; height:18px; }
/* select living inside the blue card */
.sc-select { flex:1; min-width:0; height:40px; background:#fff; border:1px solid transparent; border-radius:8px;
  display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 12px;
  font:400 14px var(--ff-sans); color:var(--fg-default); cursor:pointer; }
.sc-select.active { border-color:var(--jib-blue-300); box-shadow:0 0 0 3px rgba(255,255,255,0.35); }
.sc-select span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-select img { width:18px; height:18px; opacity:.55; flex:none; }
/* green status check */
.sc-tick { width:28px; height:28px; border-radius:9999px; background:#36C77E; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.sc-tick img { width:15px; height:15px; filter:invert(1) brightness(2); }

/* Folded (white) */
.scard-fold { width:140px; background:#fff; }
.scard-fold .sc-hd { padding:18px 16px; display:flex; align-items:center; gap:8px; }
.scard-fold .sc-ttl { display:flex; align-items:center; gap:8px; font:600 17px var(--ff-sans); color:var(--jib-navy); }
.scard-fold .sc-ttl img { width:18px; height:18px; }
.scard-fold .sc-rows { display:flex; flex-direction:column; }
.scard-fold .sc-row { height:54px; display:flex; align-items:center; justify-content:center; border-top:1px solid var(--border-default); }
.scard-fold .sc-auto-ic { width:18px; height:18px; opacity:.85; }
.scard-fold .sc-tick { width:26px; height:26px; }

/* ---------- Objective / option card (radio select) ---------- */
.optcard { width:236px; border-radius:14px; padding:18px; cursor:pointer; background:#fff;
  border:1px solid var(--border-default); box-shadow:var(--shadow-sm); transition:border-color var(--dur-fast), box-shadow var(--dur-fast); }
.optcard:hover { border-color:var(--jib-blue-300); }
.optcard .oc-hd { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.optcard .oc-radio { width:20px; height:20px; border-radius:9999px; border:1.5px solid var(--jib-gray-400); flex:none;
  display:inline-flex; align-items:center; justify-content:center; }
.optcard .oc-ttl { font:600 16px var(--ff-sans); color:var(--jib-navy); }
.optcard .oc-desc { font:400 14px var(--ff-sans); color:var(--fg-muted); line-height:1.45; }
.optcard.sel { background:var(--jib-blue-500); border-color:var(--jib-blue-500); box-shadow:var(--shadow-md); }
.optcard.sel .oc-radio { background:#fff; border-color:#fff; }
.optcard.sel .oc-radio::after { content:''; width:9px; height:9px; border-radius:9999px; background:var(--jib-navy); }
.optcard.sel .oc-ttl { color:#fff; }
.optcard.sel .oc-desc { color:rgba(255,255,255,0.92); }

/* ---------- Facebook editable ad preview ---------- */
.fbad { width:380px; background:#fff; border-radius:8px; overflow:hidden; box-shadow:var(--shadow-md);
  font-family:var(--ff-ui); color:#050505; border:1px solid var(--jib-gray-200); }
.fbad-hd { display:flex; align-items:flex-start; gap:8px; padding:12px; }
.fbad-av { width:40px; height:40px; border-radius:9999px; flex:none; object-fit:cover; background:#dfe3e8; }
.fbad-who { flex:1; line-height:1.35; }
.fbad-who .nm { font:600 14px var(--ff-ui); }
.fbad-who .nm a { color:#1877F2; text-decoration:none; }
.fbad-who .mt { font:400 12px var(--ff-ui); color:#65676B; display:flex; align-items:center; gap:4px; }
.fbad-who .mt img { width:12px; height:12px; opacity:.7; }
.fbad-hd .acts { display:flex; gap:14px; color:#65676B; align-items:center; }
.fbad-hd .acts img { width:20px; height:20px; cursor:pointer; }
.fbad-hd .dots { font:700 20px var(--ff-ui); line-height:.6; letter-spacing:1px; }
.fbad-copy { padding:0 12px 10px; }
.fb-edit { border:1px dashed #1877F2; border-radius:4px; padding:8px 10px; }
.fbad-copy .fb-edit { font:400 14px var(--ff-ui); color:#050505; line-height:1.42; }
.fbad-img { position:relative; background:linear-gradient(135deg,#d7dbe0,#c3c8cf); aspect-ratio:1/0.82; overflow:hidden; }
.fbad-img .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.fbad-img .ph img { width:46px; height:46px; opacity:.45; }
.fbad-tools { position:absolute; top:14px; right:14px; display:flex; gap:8px; }
.fbad-tools .tool { width:40px; height:40px; border-radius:8px; background:#fff; box-shadow:var(--shadow-sm);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.fbad-tools .tool img { width:18px; height:18px; }
.fbad-sel { position:absolute; top:46%; right:8%; width:42%; height:42%; border:1.5px dashed #fff; border-radius:2px; }
.fbad-sel .x { position:absolute; top:-14px; right:-14px; width:28px; height:28px; border-radius:9999px; background:#fff;
  box-shadow:var(--shadow-sm); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.fbad-sel .x img { width:14px; height:14px; }
.fbad-foot { padding:12px; display:flex; flex-direction:column; gap:8px; }
.fbad-head .fb-edit { font:600 15px var(--ff-ui); color:#050505; }
.fbad-linkrow { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.fbad-linkrow .fb-edit { flex:1; font:400 13px var(--ff-ui); color:#8a8d91; }
.fbad-apply { background:#E4E6EB; color:#050505; border-radius:6px; padding:9px 14px; font:600 13px var(--ff-ui); flex:none; cursor:pointer; }
.fbad-stats { padding:2px 12px 10px; display:flex; align-items:center; justify-content:space-between; font:400 13px var(--ff-ui); color:#65676B; white-space:nowrap; }
.fbad-stats .react { display:inline-flex; align-items:center; gap:6px; }
.fbad-stats .react .emos { display:inline-flex; }
.fbad-stats .react .emos span { width:18px; height:18px; border-radius:9999px; border:1.5px solid #fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; margin-left:-4px; }
.fbad-stats .react .emos span:first-child { margin-left:0; }
.fbad-actions { display:flex; border-top:1px solid #ced0d4; }
.fbad-act { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:9px; color:#65676B; font:600 14px var(--ff-ui); cursor:pointer; }
.fbad-act img { width:20px; height:20px; }