/* Zichtbaarheid in AI-antwoorden */
.m-zichtbaarheid .zv-label { padding: 10px 14px; border-radius: var(--radius); background: var(--warn-soft); color: #6d4700; border: 1px solid color-mix(in srgb, var(--warn) 30%, white); margin-bottom: 14px; font-size: 13.5px; }
.m-zichtbaarheid .zv-kpis { margin-bottom: 14px; }
.m-zichtbaarheid .zv-kpi-name { font-size: 17px; line-height: 1.25; margin-top: 6px; letter-spacing: -.01em; }
.m-zichtbaarheid .zv-chart-card { margin-bottom: 14px; }
.m-zichtbaarheid .zv-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.m-zichtbaarheid .zv-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--muted); margin-top: 6px; }
.m-zichtbaarheid .zv-legend b { color: var(--ink); }
.m-zichtbaarheid .zv-legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }

.m-zichtbaarheid .zv-acties { margin-bottom: 16px; }
.m-zichtbaarheid .zv-acties-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.m-zichtbaarheid .zv-acties-h h3 { font-size: 15px; }
.m-zichtbaarheid .zv-actie { display: grid; gap: 8px; align-content: start; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.m-zichtbaarheid .zv-actie p { font-size: 13.5px; }
.m-zichtbaarheid .zv-actie .btn { justify-self: start; }

.m-zichtbaarheid .zv-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.m-zichtbaarheid .zv-toolbar .seg { flex-wrap: wrap; }
.m-zichtbaarheid .zv-n { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: rgba(0, 0, 0, .06); font-size: 11px; margin-left: 2px; }
.m-zichtbaarheid .zv-add { display: flex; gap: 8px; flex: 0 1 470px; min-width: 0; }
.m-zichtbaarheid .zv-add .input { min-width: 0; }

.m-zichtbaarheid .zv-table tbody tr { cursor: pointer; transition: background-color .15s; }
.m-zichtbaarheid .zv-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.m-zichtbaarheid .zv-table tbody tr.is-new td { animation: zv-flash 2.4s ease; }
@keyframes zv-flash { 0%, 40% { background: var(--accent-soft); } 100% { background: transparent; } }
.m-zichtbaarheid .zv-table td { font-size: 13.5px; }
.m-zichtbaarheid .zv-q { min-width: 230px; }
.m-zichtbaarheid .zv-qt { display: block; font-weight: 600; }
.m-zichtbaarheid .zv-qm { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 3px; }
.m-zichtbaarheid .zv-x { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 4px; font-size: 12px; }
.m-zichtbaarheid .zv-x:hover { color: var(--bad); }
.m-zichtbaarheid .zv-pc { text-align: center; white-space: nowrap; }
.m-zichtbaarheid th.zv-pc { white-space: normal; min-width: 96px; line-height: 1.25; }
.m-zichtbaarheid .zv-pos { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--ok-soft); color: var(--ok); }
.m-zichtbaarheid .zv-pos-1 { background: var(--ok); color: #fff; }
.m-zichtbaarheid .zv-no { font-size: 12px; color: #a0a6b0; }
.m-zichtbaarheid .zv-chip { display: inline-flex; align-items: center; gap: 5px; margin: 1px 4px 1px 0; font-size: 12px; white-space: nowrap; }
.m-zichtbaarheid .zv-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.m-zichtbaarheid .zv-foot { margin-top: 10px; }

/* detailvenster */
.zv-modal .modal { width: min(980px, 100%); }
.zv-modal .zv-d-q { display: grid; gap: 2px; margin-bottom: 12px; }
.zv-modal .zv-d-q b { font-size: 17px; }
.zv-modal .zv-d-seg { flex-wrap: wrap; margin-bottom: 14px; }
.zv-modal .zv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #c9ced6; margin-left: 4px; }
.zv-modal .zv-dot.is-on { background: var(--ok); }
.zv-modal .zv-d-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.zv-modal .zv-ans { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); font-size: 14px; display: grid; gap: 8px; }
.zv-modal .zv-ans ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.zv-modal .zv-ans-h { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.zv-modal .zv-ans-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #fff; background: linear-gradient(135deg, #5b6472, #2b313b); }
.zv-modal mark { padding: 0 4px; border-radius: 4px; font-weight: 650; }
.zv-modal .zv-m-ons { background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 80%, black); box-shadow: inset 0 -2px 0 var(--accent); }
.zv-modal .zv-m-con { background: #eceef2; color: var(--ink); }
.zv-modal .zv-ref { font-size: 10px; color: var(--info); font-weight: 700; margin-left: 2px; }
.zv-modal .zv-src { margin-top: 12px; display: grid; gap: 4px; }
.zv-modal .zv-src ol { margin: 0; padding-left: 20px; font-size: 13px; display: grid; gap: 2px; }
.zv-modal .zv-src li.is-ons { color: var(--accent); font-weight: 600; }
.zv-modal .zv-why { padding: 14px 16px; border-radius: var(--radius); background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad) 22%, white); display: grid; gap: 6px; font-size: 13.5px; }
.zv-modal .zv-why.is-ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, white); }
.zv-modal .zv-why .label { margin-top: 4px; color: var(--ink); }
.zv-modal .zv-why-btns { margin-top: 6px; }
.zv-modal .zv-why-btns .btn { background: #fff; }

@media (max-width: 1100px) {
  .m-zichtbaarheid .zv-add { flex: 1 1 100%; }
}
@media (max-width: 760px) {
  .zv-modal .zv-d-grid { grid-template-columns: 1fr; }
  .m-zichtbaarheid .zv-table { border: 0; background: none; overflow: visible; }
  .m-zichtbaarheid .zv-table table, .m-zichtbaarheid .zv-table tbody { display: block; }
  .m-zichtbaarheid .zv-table thead { display: none; }
  .m-zichtbaarheid .zv-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 8px; padding: 12px; margin-bottom: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
  .m-zichtbaarheid .zv-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .m-zichtbaarheid .zv-table td.zv-q { grid-column: 1 / -1; min-width: 0; }
  .m-zichtbaarheid .zv-table td.zv-pc { text-align: left; white-space: normal; }
  .m-zichtbaarheid .zv-table td[data-l="Concurrenten"], .m-zichtbaarheid .zv-table td[data-l="Bronnen"] { grid-column: 1 / -1; }
  .m-zichtbaarheid .zv-table td:not(.zv-q)::before { content: attr(data-l); display: block; font-size: 10.5px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; line-height: 1.25; }
  .m-zichtbaarheid .zv-table tbody tr:hover td { background: none; }
}
@media (max-width: 600px) {
  .m-zichtbaarheid .zv-toolbar .seg { width: 100%; }
  .m-zichtbaarheid .zv-toolbar .seg button { flex: 1 1 auto; padding: 6px 7px; font-size: 12.5px; }
  .m-zichtbaarheid .zv-add { flex-direction: column; }
  .m-zichtbaarheid .zv-toolbar .spacer { display: none; }
  .m-zichtbaarheid .zv-kpi-name { font-size: 15px; }
}
.m-zichtbaarheid .zv-chart svg { max-width: 100%; height: auto; }
.m-zichtbaarheid .zv-br { min-width: 150px; }
.m-zichtbaarheid .zv-bchip { display: inline-block; margin: 1px 4px 2px 0; padding: 1px 7px; border-radius: 6px; background: var(--line-2); color: #4a525e; font-size: 11.5px; white-space: nowrap; }
.m-zichtbaarheid .zv-bchip.is-ons { background: var(--accent-soft); color: var(--accent); font-weight: 600; }