/* ==========================================================================
   Atisuto DVT Dashboard — stijl 1-op-1 overgenomen uit de lokale analysetool
   Alles staat onder .dvt-dashboard zodat het het WordPress-thema niet raakt.
   ========================================================================== */
.dvt-dashboard {
  --bg:#0d0620; --pink:#c8006b; --pink-light:#e8198a; --cyan:#00b4d8; --purple:#7b2fbe; --card-bg:#f8f6ff;
  position:relative; background:var(--bg); color:#fff;
  font-family:-apple-system,'Segoe UI',sans-serif; border-radius:18px; overflow:hidden;
}
.dvt-dashboard * { box-sizing:border-box; }
.dvt-dashboard::before {
  content:''; position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='92' viewBox='0 0 80 92'%3E%3Cpath d='M40 4 L76 24 L76 68 L40 88 L4 68 L4 24 Z' fill='none' stroke='rgba(200,0,107,0.08)' stroke-width='1.5'/%3E%3C/svg%3E");
  pointer-events:none; z-index:0;
}
.dvt-dashboard header {
  position:relative; z-index:1;
  background:linear-gradient(135deg,#160a30 0%,#0d0620 60%,#1a0535 100%);
  border-bottom:2px solid var(--pink); padding:18px 40px;
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.dvt-dashboard .logo-box {
  background:linear-gradient(135deg,var(--pink),var(--purple)); border-radius:12px;
  padding:12px 16px; line-height:1.1; font-weight:900; font-size:13px;
  text-transform:uppercase; letter-spacing:0.5px; min-width:120px; color:#fff;
}
.dvt-dashboard .logo-box .sub { font-size:10px; font-weight:600; color:rgba(255,255,255,0.8); margin-top:4px; }
.dvt-dashboard header h1 { font-size:22px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:#fff; margin:0; }
.dvt-dashboard header p { color:rgba(255,255,255,0.65); font-size:13px; margin:2px 0 0; }

/* View switch */
.dvt-dashboard .view-switch { margin-left:auto; display:flex; gap:4px; background:rgba(255,255,255,0.07); padding:5px; border-radius:12px; }
.dvt-dashboard .view-switch button {
  padding:10px 22px; border:none; border-radius:8px; background:transparent;
  color:rgba(255,255,255,0.7); font-size:13px; font-weight:700; cursor:pointer;
  text-transform:uppercase; letter-spacing:0.5px; transition:all .15s;
}
.dvt-dashboard .view-switch button:hover { color:#fff; }
.dvt-dashboard .view-switch button.active { background:linear-gradient(135deg,var(--pink),var(--purple)); color:#fff; }

/* Drop zone (fallback / extra uploads) */
.dvt-dashboard #drop-zone {
  position:relative; z-index:1; margin:40px auto; max-width:700px;
  border:2px dashed rgba(200,0,107,0.5); border-radius:16px; padding:48px 32px;
  text-align:center; background:rgba(200,0,107,0.04); cursor:pointer; transition:all .2s;
}
.dvt-dashboard #drop-zone:hover,.dvt-dashboard #drop-zone.drag-over { border-color:var(--pink); background:rgba(200,0,107,0.1); }
.dvt-dashboard #drop-zone svg { width:48px; height:48px; opacity:0.5; margin-bottom:16px; }
.dvt-dashboard #drop-zone h2 { font-size:18px; margin-bottom:8px; color:#fff; }
.dvt-dashboard #drop-zone p { color:rgba(255,255,255,0.65); font-size:14px; }
.dvt-dashboard #file-input,.dvt-dashboard #file-input-extra { display:none; }
.dvt-dashboard .btn {
  display:inline-block; margin-top:20px; padding:12px 28px;
  background:linear-gradient(135deg,var(--pink),var(--purple)); color:#fff; border:none;
  border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; letter-spacing:0.5px; text-transform:uppercase;
}
.dvt-dashboard .add-more { position:relative; z-index:1; text-align:center; padding:12px 0; }
.dvt-dashboard .add-more label { cursor:pointer; color:var(--pink-light); font-size:13px; font-weight:600; text-decoration:underline; }

.dvt-dashboard .page { position:relative; z-index:1; display:none; max-width:1400px; margin:0 auto; padding:0 32px 60px; }
.dvt-dashboard .page.active { display:block; }

/* Dashboard */
.dvt-dashboard .tabs { display:flex; gap:4px; padding:24px 0 0; flex-wrap:wrap; }
.dvt-dashboard .tab {
  padding:10px 20px; border-radius:8px 8px 0 0; border:none; background:rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.65); font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.5px; cursor:pointer; transition:all .15s;
}
.dvt-dashboard .tab:hover { background:rgba(255,255,255,0.14); color:#fff; }
.dvt-dashboard .tab.active { background:#fff; color:#0d0620; }
.dvt-dashboard .tab-content { display:none; }
.dvt-dashboard .tab-content.active { display:block; }
.dvt-dashboard .event-badge {
  display:inline-block; background:linear-gradient(135deg,var(--pink),var(--purple)); color:#fff;
  font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; text-transform:uppercase;
  letter-spacing:0.5px; margin:16px 0 0;
}
.dvt-dashboard .stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin:16px 0; }
.dvt-dashboard .stat-card { background:#fff; border-radius:14px; padding:22px 20px; text-align:center; box-shadow:0 4px 20px rgba(0,0,0,0.3); }
.dvt-dashboard .stat-card .num { font-size:36px; font-weight:900; background:linear-gradient(135deg,var(--pink),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
.dvt-dashboard .stat-card .label { font-size:12px; font-weight:600; color:#555; margin-top:6px; text-transform:uppercase; letter-spacing:0.5px; }
.dvt-dashboard .chart-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(380px,1fr)); gap:20px; margin-top:8px; }
.dvt-dashboard .chart-card { background:#fff; border-radius:14px; padding:24px; box-shadow:0 4px 20px rgba(0,0,0,0.3); }
.dvt-dashboard .chart-card h3 { font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:#0d0620; margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid var(--pink); }
.dvt-dashboard .resp-note { font-size:11px; font-weight:700; color:#9a7ab0; text-transform:uppercase; letter-spacing:0.5px; margin:-10px 0 14px; }
.dvt-dashboard .chart-card canvas { width:100% !important; }
.dvt-dashboard .words-list { display:flex; flex-wrap:wrap; gap:8px; padding-top:4px; }
.dvt-dashboard .word-tag { padding:6px 14px; border-radius:20px; font-size:13px; font-weight:700; background:linear-gradient(135deg,var(--pink),var(--purple)); color:#fff; }
.dvt-dashboard .open-answers { max-height:240px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; }
.dvt-dashboard .open-answer { background:var(--card-bg); border-left:3px solid var(--pink); padding:8px 12px; border-radius:0 6px 6px 0; font-size:13px; color:#333; font-style:italic; }
.dvt-dashboard .open-answers::-webkit-scrollbar { width:4px; }
.dvt-dashboard .open-answers::-webkit-scrollbar-thumb { background:var(--pink); border-radius:4px; }
.dvt-dashboard .stars-row { display:flex; gap:8px; align-items:center; margin:6px 0; }
.dvt-dashboard .stars-bar-wrap { flex:1; background:#eee; border-radius:4px; height:12px; }
.dvt-dashboard .stars-bar { height:12px; border-radius:4px; background:linear-gradient(90deg,var(--pink),var(--purple)); }
.dvt-dashboard .stars-label { width:28px; font-size:12px; color:#555; font-weight:700; }
.dvt-dashboard .stars-count { width:28px; font-size:12px; color:#999; text-align:right; }

/* Compare */
.dvt-dashboard .controls {
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:16px;
  padding:24px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:28px; margin:24px 0;
}
.dvt-dashboard .ctrl-group h4 { font-size:12px; text-transform:uppercase; letter-spacing:1px; color:var(--pink-light); margin-bottom:12px; font-weight:800; }
.dvt-dashboard .form-chips { display:flex; flex-direction:column; gap:8px; }
.dvt-dashboard .chip { display:flex; align-items:center; gap:10px; cursor:pointer; padding:9px 14px; border-radius:10px; background:rgba(255,255,255,0.05); border:1px solid transparent; transition:all .15s; font-size:14px; }
.dvt-dashboard .chip:hover { background:rgba(255,255,255,0.1); }
.dvt-dashboard .chip.selected { border-color:var(--pink); background:rgba(200,0,107,0.18); }
.dvt-dashboard .chip .dot { width:14px; height:14px; border-radius:4px; flex-shrink:0; }
.dvt-dashboard .chip .cnt { margin-left:auto; font-size:11px; color:rgba(255,255,255,0.5); }
.dvt-dashboard select { width:100%; padding:11px 14px; border-radius:10px; background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.18); font-size:14px; font-family:inherit; cursor:pointer; }
.dvt-dashboard select option { background:#1a0535; }
.dvt-dashboard select:focus { outline:none; border-color:var(--pink); }
.dvt-dashboard .chart-type-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.dvt-dashboard .type-btn { padding:12px 6px; border-radius:10px; background:rgba(255,255,255,0.05); border:1px solid transparent; cursor:pointer; text-align:center; font-size:11px; font-weight:600; transition:all .15s; color:rgba(255,255,255,0.8); }
.dvt-dashboard .type-btn:hover { background:rgba(255,255,255,0.1); }
.dvt-dashboard .type-btn.active { border-color:var(--pink); background:rgba(200,0,107,0.18); color:#fff; }
.dvt-dashboard .type-btn svg { width:24px; height:24px; display:block; margin:0 auto 5px; }
.dvt-dashboard .toggle-row { display:flex; gap:8px; margin-top:14px; }
.dvt-dashboard .toggle-btn { flex:1; padding:9px; border-radius:8px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.15); cursor:pointer; font-size:12px; color:rgba(255,255,255,0.7); font-weight:600; }
.dvt-dashboard .toggle-btn.active { background:linear-gradient(135deg,var(--pink),var(--purple)); color:#fff; border-color:transparent; }
.dvt-dashboard .chart-wrap { background:#fff; border-radius:16px; padding:28px; box-shadow:0 4px 24px rgba(0,0,0,0.35); }
.dvt-dashboard .chart-wrap h3 { font-size:16px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:#0d0620; margin-bottom:18px; padding-bottom:12px; border-bottom:2px solid var(--pink); }
.dvt-dashboard #main-canvas-box { position:relative; height:460px; }
.dvt-dashboard .data-table { width:100%; border-collapse:collapse; margin-top:24px; font-size:13px; color:#222; }
.dvt-dashboard .data-table th,.dvt-dashboard .data-table td { padding:8px 12px; text-align:left; border-bottom:1px solid #eee; }
.dvt-dashboard .data-table th { color:#0d0620; font-weight:800; text-transform:uppercase; font-size:11px; letter-spacing:0.5px; }
.dvt-dashboard .data-table td:not(:first-child) { text-align:right; font-variant-numeric:tabular-nums; }
.dvt-dashboard .data-table tr:hover td { background:#faf7ff; }
.dvt-dashboard .hint { color:rgba(255,255,255,0.45); font-size:12px; margin-top:8px; }
.dvt-dashboard .dl-btn { float:right; padding:7px 16px; background:rgba(200,0,107,0.12); color:var(--pink); border:1px solid var(--pink); border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; }
.dvt-dashboard .dl-btn:hover { background:rgba(200,0,107,0.22); }

/* Insights */
.dvt-dashboard .insights { background:linear-gradient(135deg,rgba(200,0,107,0.10),rgba(123,47,190,0.10)); border:1px solid rgba(200,0,107,0.3); border-radius:14px; padding:20px 24px; margin-top:16px; }
.dvt-dashboard .insights h3 { font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; color:#fff; margin-bottom:12px; }
.dvt-dashboard .insights ul { list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:8px 28px; margin:0; padding:0; }
.dvt-dashboard .insights li { font-size:14px; color:rgba(255,255,255,0.85); padding-left:18px; position:relative; line-height:1.45; }
.dvt-dashboard .insights li::before { content:'▸'; position:absolute; left:0; color:var(--pink-light); font-weight:900; }
.dvt-dashboard .insights b { color:#fff; }

/* Print button */
.dvt-dashboard .print-btn { padding:10px 18px; border:1px solid var(--pink); background:rgba(200,0,107,0.12); color:var(--pink-light); border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; letter-spacing:0.3px; }
.dvt-dashboard .print-btn:hover { background:rgba(200,0,107,0.22); }
.dvt-dashboard .print-only { display:none; }

@media (max-width:860px){ .dvt-dashboard .controls{grid-template-columns:1fr;} .dvt-dashboard .view-switch{margin-left:0;width:100%;} }

/* Print / PDF */
@media print {
  @page { margin:14mm; }
  .dvt-dashboard::before { display:none; }
  .dvt-dashboard { background:#fff !important; color:#000; border-radius:0; }
  .dvt-dashboard header { background:#fff !important; border-bottom:2px solid var(--pink); padding:0 0 12px; }
  .dvt-dashboard header h1 { color:#111; } .dvt-dashboard header p { color:#555; }
  .dvt-dashboard .logo-box { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .dvt-dashboard #drop-zone, .dvt-dashboard #add-more-btn, .dvt-dashboard .view-switch, .dvt-dashboard .print-btn, .dvt-dashboard .tabs, .dvt-dashboard .dl-btn { display:none !important; }
  .dvt-dashboard .print-only { display:block; margin:10px 0 6px; }
  .dvt-dashboard .chart-card, .dvt-dashboard .stat-card, .dvt-dashboard .insights { box-shadow:none !important; border:1px solid #ddd !important; break-inside:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .dvt-dashboard .stat-card .num, .dvt-dashboard .event-badge, .dvt-dashboard .word-tag, .dvt-dashboard .stars-bar { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .dvt-dashboard .insights { background:#f4eefb !important; }
  .dvt-dashboard .insights h3, .dvt-dashboard .insights li, .dvt-dashboard .insights b { color:#111 !important; }
  .dvt-dashboard .insights li::before { color:var(--pink) !important; }
  .dvt-dashboard .chart-grid { grid-template-columns:1fr 1fr !important; gap:14px; }
  .dvt-dashboard .page { padding:0; }
}