/* VV Consult — Employee Performance Suite
   ------------------------------------------------------------------
   Palette, type and component vocabulary shared with the Customer
   Satisfaction Suite (vv-satisfaction-suite/app/static/style.css), so a
   client who uses both products recognises the second one immediately:
   dark forest-teal from the vv-consult.be wordmark, a warm terracotta
   accent, and a soft cream page background rather than a generic slate.

   One stylesheet, no external fonts, no third-party assets. */
:root{
  /* --- shared brand tokens (keep in step with the CSAT suite) --- */
  --vv-navy:#14524e;
  --vv-teal:#14524e;
  --vv-teal-light:#dcece9;
  --vv-amber:#c17a4a;
  --vv-bg:#f8f6f2;
  --vv-border:#e5e1d8;
  --vv-text:#262521;
  --vv-muted:#6b6a63;

  /* --- names this product's components use --- */
  --ink:var(--vv-text); --muted:var(--vv-muted); --faint:#8e8c84;
  --rule:var(--vv-border); --bg:var(--vv-bg); --panel:#fff;
  --accent:var(--vv-teal); --accent-soft:var(--vv-teal-light);
  --warn:#9a5a2a; --warn-soft:#fdf3e9; --warn-rule:#ecd3bb;
  --stop:#a02c2c; --stop-soft:#fbeaea; --stop-rule:#e8c9c9;
  --ok:#14524e; --ok-soft:#dcece9;
  --radius:10px;
  --sans:-apple-system,"Segoe UI",Roboto,sans-serif;
  font-family:var(--sans);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:15px;line-height:1.55;
  color:var(--ink);background:var(--bg)}
a{color:var(--vv-teal)}
h1,h2,h3{line-height:1.25;margin:0 0 .4em;color:var(--ink)}
h1{font-size:1.5rem;letter-spacing:-.01em}
h2{font-size:1.12rem}
h3{font-size:.98rem}
p{margin:0 0 .8em}
small,.small{font-size:.82rem;color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.85em}

/* --- topbar, matching the CSAT suite ------------------------------- */
.topbar{background:var(--vv-navy);color:#fff;padding:14px 24px;position:relative;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px;
  color:#fff;text-decoration:none;white-space:nowrap}
.brand-mark{height:26px;width:auto;display:block}
.brand small{display:block;font-weight:400;color:#b9cfcc;font-size:11px;letter-spacing:0}
.topbar-nav{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.topbar-nav a{color:#e2e8f0;text-decoration:none;font-size:14px;white-space:nowrap}
.topbar-nav a.on,.topbar-nav a:hover{color:var(--vv-teal-light)}
.topbar-who{color:#b9cfcc;font-size:12.5px;white-space:nowrap}

/* Hamburger — pure CSS checkbox toggle, no script. Below the breakpoint
   the inline nav would wrap across several lines and push the page down. */
.nav-toggle-checkbox{display:none}
.nav-toggle-btn{display:none;cursor:pointer;padding:6px;border-radius:6px;line-height:0}
.nav-toggle-btn:hover{background:rgba(255,255,255,.12)}
@media(max-width:820px){
  .nav-toggle-btn{display:inline-flex;align-items:center;justify-content:center}
  .topbar-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--vv-navy);
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;padding:4px 24px 12px;gap:0;
    box-shadow:0 8px 20px rgba(0,0,0,.2);z-index:20}
  .nav-toggle-checkbox:checked ~ .topbar-nav{display:flex}
  .nav-toggle-checkbox:checked ~ .nav-toggle-btn{background:rgba(255,255,255,.18)}
  .topbar-nav a{padding:12px 2px;border-top:1px solid rgba(255,255,255,.12)}
  .topbar-nav a:first-child{border-top:none}
  .topbar-who{display:none}
}

/* --- layout -------------------------------------------------------- */
main,.container{max-width:1080px;margin:28px auto;padding:0 20px 4rem}
main.narrow{max-width:720px}
.grid{display:grid;gap:1rem}
@media(min-width:800px){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}}

/* --- cards --------------------------------------------------------- */
.panel,.card{background:#fff;border:1px solid var(--vv-border);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.panel.tight{padding:14px 16px;margin-bottom:14px}
.panel h2:first-child,.panel h3:first-child{margin-top:0}
.panel h2{font-size:17px}
.eyebrow{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:.35rem}

/* --- notices ------------------------------------------------------- */
.note{background:#f0f6f5;border:1px solid #cfe2df;color:#123f3c;
  padding:12px 14px;border-radius:8px;margin:0 0 1rem;font-size:13.5px}
.note.warn{background:var(--warn-soft);border-color:var(--warn-rule);color:#7a4520}
.note.stop{background:var(--stop-soft);border-color:var(--stop-rule);color:#8b2323}
.note.ok{background:var(--ok-soft);border-color:#bcd8d3;color:#0f3f3c}
.note strong{display:block;margin-bottom:.15rem}
.banner-locked{background:var(--stop-soft);border:1px solid var(--stop-rule);color:#8b2323;
  padding:.85rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.88rem}

/* --- score --------------------------------------------------------- */
.score-row{display:flex;gap:1.6rem;align-items:flex-start;flex-wrap:wrap}
.epi{font-size:2.9rem;font-weight:700;line-height:1;color:var(--vv-navy);letter-spacing:-.02em}
.epi-range{font-size:.82rem;color:var(--muted);margin-top:.25rem}
.rangebar{position:relative;height:10px;background:#e8e5dd;border-radius:20px;margin:.5rem 0;min-width:220px}
.rangebar .ci{position:absolute;top:0;height:10px;background:#a9cbc6;border-radius:20px}
.rangebar .pt{position:absolute;top:-3px;width:3px;height:16px;background:var(--vv-navy);border-radius:2px}

/* --- badges -------------------------------------------------------- */
.pill,.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;
  font-weight:600;background:#f1efe9;color:var(--muted)}
.pill.b-exceptional{background:#cbe8da;color:#0a5138}
.pill.b-strong{background:#ddf2e9;color:#0d6b4c}
.pill.b-solid{background:#ece9e1;color:#55544d}
.pill.b-developing{background:#f4e2d2;color:#8a4f22}
.pill.b-below_requirement{background:#f6dcdc;color:#8b2323}
.pill.flag{background:var(--warn-soft);color:var(--warn)}
.chip{display:inline-block;background:#fff;border:1px solid var(--vv-border);border-radius:20px;
  padding:3px 11px;font-size:12px;color:var(--muted);margin:0 .25rem .25rem 0}
.chip a{color:inherit;text-decoration:none}

/* --- tables -------------------------------------------------------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;padding:8px 10px;border-bottom:1px solid var(--vv-border);
  color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--vv-border);vertical-align:top}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* --- bars ---------------------------------------------------------- */
.bar{height:8px;background:#e8e5dd;border-radius:20px;overflow:hidden;min-width:70px}
.bar>i{display:block;height:8px;background:var(--vv-teal);border-radius:20px}
.gap-pos{color:var(--warn);font-weight:600}
.gap-neg{color:var(--vv-teal);font-weight:600}

/* --- forms --------------------------------------------------------- */
label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:.7rem 0 .25rem}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],
input[type=file],select,textarea{
  width:100%;font-family:inherit;font-size:14px;padding:8px 10px;
  border:1px solid var(--vv-border);border-radius:6px;background:#fff;color:var(--ink)}
textarea{min-height:5rem;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid #a9cbc6;outline-offset:1px;border-color:var(--vv-teal)}
button,.btn{background:var(--vv-teal);color:#fff;border:none;cursor:pointer;
  padding:9px 16px;border-radius:6px;font-family:inherit;font-size:14px;font-weight:600;
  text-decoration:none;display:inline-block}
button:hover,.btn:hover{background:#0f403d}
button.ghost,.btn.ghost,button.secondary,.btn.secondary{background:#fff;color:var(--vv-teal);
  border:1px solid var(--vv-teal)}
button.ghost:hover,.btn.ghost:hover{background:var(--vv-teal-light)}
button.quiet,.btn.quiet{background:#fff;color:var(--muted);border:1px solid var(--vv-border)}
button.quiet:hover,.btn.quiet:hover{background:#f4f2ec;color:var(--ink)}
button.danger,.btn.danger{background:#b3352c}
button.danger:hover{background:#93291f}
button[disabled]{background:#d8d4ca;color:#8e8c84;cursor:not-allowed}
fieldset{border:none;padding:0;margin:0 0 1.2rem}
.row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end}
.row>*{flex:1;min-width:150px}
.row .shrink{flex:0 0 auto;min-width:0}
.inline{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.check{display:flex;gap:.55rem;align-items:flex-start;font-weight:400;color:var(--ink);
  font-size:14px;margin:.5rem 0}
.check input{margin-top:.3rem;flex:0 0 auto;width:auto}

/* --- assessment form: mobile first, no script ---------------------- */
.q{border:1px solid var(--vv-border);border-radius:var(--radius);background:#fff;
  padding:16px 18px;margin-bottom:12px}
.q .text{font-size:15px;margin-bottom:.7rem}
.scale{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:620px){.scale{grid-template-columns:repeat(6,1fr)}}
.scale label{display:block;margin:0;font-weight:500;color:var(--ink)}
.scale input{position:absolute;opacity:0;width:0;height:0}
.scale span{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:10px 12px;border:1px solid var(--vv-border);border-radius:8px;font-size:13px;
  line-height:1.2;cursor:pointer;background:#fff;min-height:44px}
.scale input:checked+span{background:var(--vv-teal);border-color:var(--vv-teal);color:#fff;font-weight:700}
.scale input:focus-visible+span{outline:2px solid #a9cbc6;outline-offset:2px}
.scale .na span{color:var(--muted);font-style:italic}
.scale .na input:checked+span{background:var(--muted);border-color:var(--muted);color:#fff;font-style:normal}
.cluster-head{margin:1.6rem 0 .6rem;padding-bottom:.35rem;border-bottom:2px solid var(--vv-border);
  color:var(--vv-navy)}

/* --- misc ---------------------------------------------------------- */
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--vv-border);margin-bottom:1rem;flex-wrap:wrap}
.tabs a{padding:.5rem .85rem;text-decoration:none;color:var(--muted);font-size:14px;font-weight:600;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--vv-teal);border-bottom-color:var(--vv-teal)}
.tier{border:1px solid var(--vv-border);border-radius:8px;padding:.8rem .9rem;margin-bottom:.6rem;background:#fff}
.tier h3{margin:0 0 .4rem;font-size:.85rem}
.tie-0{background:#fff}.tie-1{background:#faf8f4}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.25rem .9rem;font-size:14px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.suppressed{color:var(--faint);font-style:italic}
canvas{max-width:100%}
.footer,.footer-note{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--vv-border);
  font-size:12px;color:var(--muted)}
details>summary{cursor:pointer}

/* --- org tree ------------------------------------------------------ */
.orgtree,.orgtree ul{list-style:none;margin:0;padding:0}
.orgtree ul{margin-left:1.1rem;padding-left:1.1rem;border-left:2px solid var(--vv-border)}
.orgtree li{position:relative;padding:.15rem 0}
.orgtree ul>li::before{content:"";position:absolute;left:-1.1rem;top:1.2rem;width:.9rem;height:2px;
  background:var(--vv-border)}
.orgtree ul>li:last-child::after{content:"";position:absolute;left:-1.2rem;top:1.3rem;bottom:0;
  width:2px;background:var(--bg)}
.person{display:flex;gap:.6rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:#fff;border:1px solid var(--vv-border);border-radius:8px;padding:.45rem .7rem;margin:.15rem 0}
.person a{text-decoration:none;color:var(--vv-navy)}
.person a:hover{text-decoration:underline}
.person .small{margin-left:.4rem}
.person .chip{margin:0 0 0 .3rem}
.orgtree>li>.person{border-color:var(--vv-teal);background:var(--vv-teal-light)}

@media print{
  .topbar,.no-print,button,.btn,.nav-toggle-btn{display:none!important}
  body{background:#fff}
  .panel,.card{border:none;padding:0;margin-bottom:1rem}
  .orgtree ul,.person{border-color:#999}
}

/* --- organisation dashboard --------------------------------------------
   One filter row above everything it changes, then a KPI strip, then the
   panels. The filter bar is a form without a submit button on purpose:
   each select posts itself, so the reader never wonders whether a choice
   took effect. */
.filterbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;
  background:#fff;border:1px solid var(--vv-border);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:.9rem}
.filterbar>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.filterbar>div.shrink{margin-left:auto;justify-content:flex-end}
.filterbar label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:0}
.filterbar select{width:auto;min-width:9.5rem;max-width:16rem;padding:6px 8px;font-size:13.5px}
.filterbar .btn{padding:7px 13px;font-size:13px}
.selection{margin:0 0 1rem}
.selection strong{color:var(--ink)}

.kpi-row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-bottom:14px}
.kpi{margin-bottom:0;display:flex;flex-direction:column}
.kpi .epi{font-size:2.1rem;margin:.2rem 0 .45rem}
.kpi p{margin:0}
.kpi .small{margin-top:auto}

/* A meter, not a gauge: a filled track with an optional reference tick for
   the whole organisation, so a filtered group is read against it. */
.meter{position:relative;height:9px;border-radius:20px;background:#e8e5dd;
  margin:0 0 .5rem}
.meter>i{display:block;height:9px;border-radius:20px;background:var(--vv-teal);
  max-width:100%}
.meter>b{position:absolute;top:-3px;width:2px;height:15px;background:var(--vv-amber);
  border-radius:2px}

.delta-up{color:#14524e;font-weight:600}
.delta-down{color:#9a5a2a;font-weight:600}
.warn-number{color:#9a5a2a}

canvas{max-width:100%}

@media (max-width:700px){
  .filterbar{flex-direction:column;align-items:stretch}
  .filterbar>div.shrink{margin-left:0}
  .filterbar select{max-width:none;width:100%}
}

/* --- the 0-100 scale, spelled out ---------------------------------------
   A bare bar invites the reader to guess the scale. The axis labels and the
   legend below it say what each mark is, so "EPI" never has to be known in
   advance to read the row. */
.th-sub{display:block;font-weight:400;font-size:10.5px;letter-spacing:0;
  text-transform:none;color:var(--muted)}
.rangebar .ref{position:absolute;top:-2px;width:2px;height:14px;background:var(--vv-amber);
  border-radius:2px}
.scaleaxis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--faint);
  margin-top:-.15rem}
.legend{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;font-size:.82rem;color:var(--muted);
  margin:.2rem 0 .6rem}
.legend .key{display:inline-flex;align-items:center;gap:.4rem}
.legend .key i{display:inline-block;border-radius:2px}
.legend .k-pt{width:3px;height:13px;background:var(--vv-navy)}
.legend .k-ci{width:22px;height:9px;border-radius:20px;background:#a9cbc6}
.legend .k-ref{width:2px;height:13px;background:var(--vv-amber)}

/* --- why this is in my plan --------------------------------------------- */
.reasons{margin:.2rem 0 0;padding-left:1.1rem}
.reasons li{margin-bottom:.5rem}

/* A chart canvas needs a sized parent, or a responsive chart grows by a few
   pixels on every resize pass and the page ends up thousands of pixels tall. */
.chartbox{position:relative;width:100%}
.chartbox>canvas{position:absolute;inset:0}

/* --- language switcher on the assessor pages ---------------------------
   Three plain links, no script. The current language is marked, not
   hidden, so somebody who lands on the wrong one can see the way out. */
.langbar{display:flex;gap:2px;margin-left:auto;align-items:center}
.langbar a{
  display:inline-block;padding:4px 9px;border-radius:5px;
  font-size:12px;font-weight:600;letter-spacing:.04em;
  color:#b9cfcc;text-decoration:none;line-height:1.2;
}
.langbar a:hover,.langbar a:focus-visible{background:rgba(255,255,255,.12);color:#fff}
.langbar a.on{background:#fff;color:var(--vv-navy)}