/* ==========================================================================
   InSite-showcase — nagebouwde AFAS InSite-pagina waarin een dashboard
   binnenkomt en de AI-laag een afwijking aanwijst.
   Geen gradients, geen glas, geen schaduwspel: vlakke kleur en haarlijnen.
   ========================================================================== */

.insite{display:grid;gap:var(--sp-5)}

/* ---------------------------------------------------------------- frame */
.insite-chrome{
  border:1px solid var(--color-border-inverse);border-radius:var(--radius-xl);
  background:#0A0A0A;overflow:hidden
}
.panel-light .insite-chrome,.panel-grey .insite-chrome{background:var(--royaal-white);border-color:var(--color-border-subtle)}

.insite-bar{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--color-border-inverse)
}
.panel-light .insite-bar{border-color:var(--color-border-subtle)}
.insite-bar .dots{display:flex;gap:6px}
.insite-bar .dots i{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.22)}
.panel-light .insite-bar .dots i{background:var(--royaal-grey-300)}
.insite-url{
  font-size:var(--fs-caption);color:var(--color-text-inverse-muted);
  border:1px solid var(--color-border-inverse);border-radius:var(--radius-md);
  padding:4px var(--sp-3);flex:1;max-width:340px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.panel-light .insite-url{color:var(--color-text-muted);border-color:var(--color-border-subtle)}
.insite-tag{
  margin-left:auto;font-size:var(--fs-metadata);letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--royaal-gold-600)
}

/* ------------------------------------------------------------- indeling */
.insite-body{display:grid;grid-template-columns:196px minmax(0,1fr)}
@media (max-width:760px){.insite-body{grid-template-columns:1fr}.insite-nav{display:none}}

.insite-nav{
  border-right:1px solid var(--color-border-inverse);padding:var(--sp-4) 0
}
.panel-light .insite-nav{border-color:var(--color-border-subtle)}
.insite-nav .who{padding:0 var(--sp-4) var(--sp-4);border-bottom:1px solid var(--color-border-inverse);margin-bottom:var(--sp-3)}
.panel-light .insite-nav .who{border-color:var(--color-border-subtle)}
.insite-nav .who .name{font-size:var(--fs-body-sm);font-weight:700}
.insite-nav .who .org{font-size:var(--fs-metadata);color:var(--color-text-inverse-muted);letter-spacing:.04em}
.panel-light .insite-nav .who .org{color:var(--color-text-muted)}
.insite-nav li{
  font-size:var(--fs-body-sm);color:var(--color-text-inverse-muted);
  padding:9px var(--sp-4);border-left:3px solid transparent
}
.panel-light .insite-nav li{color:var(--color-text-secondary)}
.insite-nav li[aria-current]{color:var(--royaal-white);font-weight:700;border-left-color:var(--royaal-gold-600)}
.panel-light .insite-nav li[aria-current]{color:var(--color-text-primary)}

.insite-main{padding:var(--sp-5);display:grid;gap:var(--sp-5);align-content:start;position:relative;min-height:392px}
@media (max-width:520px){.insite-main{padding:var(--sp-4);min-height:0}}
.insite-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-2) var(--sp-4)}
.insite-head h4{font-size:var(--fs-h4)}
.insite-head .period{font-size:var(--fs-caption);color:var(--color-text-inverse-muted)}
.panel-light .insite-head .period{color:var(--color-text-muted)}

/* ------------------------------------------------------------------ kpi */
.insite-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--color-border-inverse)}
.panel-light .insite-kpis{background:var(--color-border-subtle)}
@media (max-width:620px){.insite-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi{background:#0A0A0A;padding:var(--sp-4)}
.panel-light .kpi{background:var(--royaal-white)}
.kpi .k-label{font-size:var(--fs-metadata);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-inverse-muted)}
.panel-light .kpi .k-label{color:var(--color-text-muted)}
.kpi .k-num{
  margin-top:var(--sp-2);font-size:22px;line-height:28px;font-weight:200;
  font-variant-numeric:tabular-nums
}
.kpi .k-note{margin-top:var(--sp-1);font-size:var(--fs-metadata);color:var(--color-text-inverse-muted)}
.panel-light .kpi .k-note{color:var(--color-text-muted)}
.kpi[data-accent] .k-num{color:var(--royaal-gold-600)}
.panel-light .kpi[data-accent] .k-num{color:var(--color-text-accent)}

/* --------------------------------------------------------------- chart */
.insite-chart{display:grid;gap:var(--sp-3)}
.chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4)}
.chart-head .t{font-size:var(--fs-label);font-weight:700;letter-spacing:.02em}
.chart-head .u{font-size:var(--fs-metadata);color:var(--color-text-inverse-muted)}
.panel-light .chart-head .u{color:var(--color-text-muted)}
.bars{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;
  align-items:end;height:132px;
  border-bottom:1px solid var(--color-border-inverse);padding-bottom:2px
}
.panel-light .bars{border-color:var(--color-border-subtle)}
.bar{position:relative;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.bar i{
  display:block;background:var(--royaal-grey-600);border-radius:2px 2px 0 0;
  height:0;transition:height var(--dur-slow) var(--ease-out),background-color var(--dur-base) var(--ease)
}
.panel-light .bar i{background:var(--royaal-grey-400)}
.bar span{
  display:block;text-align:center;margin-top:6px;
  font-size:var(--fs-metadata);color:var(--color-text-inverse-muted);font-variant-numeric:tabular-nums
}
.panel-light .bar span{color:var(--color-text-muted)}
.bar-marker{
  position:absolute;left:50%;bottom:100%;transform:translate(-50%,-6px) scale(.9);
  opacity:0;transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
  font-size:var(--fs-metadata);font-weight:700;letter-spacing:.04em;
  color:var(--royaal-black);background:var(--royaal-gold-600);
  padding:2px 6px;border-radius:var(--radius-sm);white-space:nowrap
}

/* ------------------------------------------------------------ AI-paneel */
.insite-ai{
  border:1px solid var(--color-border-inverse);border-top:3px solid var(--royaal-gold-600);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  padding:var(--sp-4);display:grid;gap:var(--sp-3);
  opacity:0;transform:translateY(10px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)
}
.panel-light .insite-ai{border-color:var(--color-border-subtle);border-top-color:var(--royaal-gold-600)}
.insite-ai .ai-head{display:flex;align-items:center;gap:var(--sp-2)}
.insite-ai .ai-head .tag{
  font-size:var(--fs-metadata);letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--royaal-gold-600)
}
.panel-light .insite-ai .ai-head .tag{color:var(--color-text-accent)}
.insite-ai h5{margin:0;font-size:var(--fs-body);font-weight:700;line-height:22px}
.insite-ai p{font-size:var(--fs-body-sm);line-height:21px;color:var(--color-text-inverse-muted);max-width:72ch}
.panel-light .insite-ai p{color:var(--color-text-secondary)}
.insite-ai .ai-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-1)}
.insite-ai .ai-actions button{
  font-size:var(--fs-body-sm);font-weight:700;min-height:36px;padding:0 var(--sp-3);
  border:1px solid var(--color-border-inverse);border-radius:var(--radius-md);
  background:transparent;color:inherit;cursor:default
}
.panel-light .insite-ai .ai-actions button{border-color:var(--color-border-strong)}
.insite-source{font-size:var(--fs-metadata);color:var(--color-text-inverse-muted)}
.panel-light .insite-source{color:var(--color-text-muted)}

/* ---------------------------------------------------------- skeletons */
.sk{background:rgba(255,255,255,.08);border-radius:var(--radius-sm);height:10px}
.panel-light .sk{background:var(--royaal-grey-200)}
.kpi .sk{width:64%;height:20px;margin-top:var(--sp-2)}
.insite-loading{display:grid;gap:var(--sp-3);position:absolute;inset:var(--sp-5);opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease)}

/* ------------------------------------------------------- staten (steps) */
/* laden */
.insite[data-step="laden"] .kpi .k-num,
.insite[data-step="laden"] .kpi .k-note{visibility:hidden}
.insite[data-step="laden"] .kpi .sk{display:block}
.insite:not([data-step="laden"]) .kpi .sk{display:none}

/* cijfers → grafiek */
.insite[data-step="grafiek"] .bar i,
.insite[data-step="signaal"] .bar i,
.insite[data-step="uitleg"] .bar i{height:var(--h)}

/* signaal */
.insite[data-step="signaal"] .bar[data-flag] i,
.insite[data-step="uitleg"] .bar[data-flag] i{background:var(--royaal-gold-600)}
.insite[data-step="signaal"] .bar-marker,
.insite[data-step="uitleg"] .bar-marker{opacity:1;transform:translate(-50%,-6px) scale(1)}

/* uitleg */
.insite[data-step="uitleg"] .insite-ai{opacity:1;transform:none}

/* ------------------------------------------------------------- stappen */
.insite-steps{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);align-items:center}
.insite-steps li{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-caption);color:var(--color-text-inverse-muted)}
.panel-light .insite-steps li{color:var(--color-text-muted)}
.insite-steps [data-dot]{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.24);transition:background-color var(--dur-fast) var(--ease)}
.panel-light .insite-steps [data-dot]{background:var(--royaal-grey-300)}
.insite-steps [data-dot][data-active="true"]{background:var(--royaal-gold-600)}
.insite-steps li[data-active="true"]{color:var(--royaal-white)}
.insite-foot{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between}
.btn-replay{
  background:transparent;border:1px solid var(--color-border-inverse);border-radius:var(--radius-md);
  color:inherit;min-height:36px;padding:0 var(--sp-3);font-size:var(--fs-body-sm);font-weight:700;cursor:pointer
}
.btn-replay:hover{border-color:var(--royaal-gold-600)}
.panel-light .btn-replay{border-color:var(--color-border-strong)}

/* ==================================================== demo in een frame */
.demo-frame{
  border:1px solid var(--color-border-subtle);border-radius:var(--radius-xl);
  overflow:hidden;background:var(--royaal-white)
}
.demo-bar{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);background:var(--royaal-black);color:var(--royaal-white)
}
.demo-bar .dots{display:flex;gap:6px}
.demo-bar .dots i{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.22)}
.demo-bar .insite-url{color:rgba(255,255,255,.66);border-color:rgba(255,255,255,.16)}
.demo-frame iframe{
  display:block;width:100%;height:clamp(520px,64vh,760px);border:0;background:var(--royaal-grey-50)
}
@media (max-width:760px){.demo-frame iframe{height:70vh}}