/* ==========================================================================
   Werkruimte, het levende Playbook en Autopilot (§14, §15).

   Dit is geen verkooppagina maar een werkbank: de eigenaar opent hem om werk
   vooruit te duwen, niet om iets te lezen. Daarom dichter dan de publieke
   site: kleinere maten, tabellen boven kaarten, status via kleur, geen
   marketingritme. De stijlwereld blijft die van de site (Graphite Console,
   dezelfde tokens en schriften), alleen het idioom is beheer.
   ========================================================================== */

.wr{max-width:var(--maxw);margin:0 auto;padding:28px var(--gut) 96px}

/* ------------------------------------------------------------- kopregel -- */
.wr-top{display:flex;flex-wrap:wrap;gap:14px;align-items:baseline;justify-content:space-between;
  padding-bottom:16px;border-bottom:1px solid var(--seam)}
.wr-top h1{font-family:var(--display);font-size:clamp(23px,3vw,31px);line-height:1.15;margin:0;letter-spacing:-.01em}
.wr-top .who{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.04em}

/* --------------------------------------------------------------- cijfers -- */
.wr-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--seam);
  border:1px solid var(--seam);margin:18px 0 26px}
.wr-kpi>button{background:var(--panel);border:0;padding:15px 16px;text-align:left;cursor:pointer;
  display:block;width:100%;transition:background .14s}
.wr-kpi>button:hover{background:var(--panel-2)}
.wr-kpi .n{font-family:var(--display);font-size:29px;line-height:1;color:var(--ink);display:block}
.wr-kpi .n small{font-size:15px;color:var(--faint);font-family:var(--sans)}
.wr-kpi .l{display:block;font-size:13px;color:var(--ink-2);margin-top:7px}
.wr-kpi .s{display:block;font-family:var(--mono);font-size:11px;color:var(--faint);margin-top:3px;letter-spacing:.03em}

/* ------------------------------------------------------------- werkbank -- */
.wr-now{border:1px solid var(--seam);background:var(--panel);margin-bottom:26px}
.wr-now>h2{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0;padding:12px 16px;border-bottom:1px solid var(--seam-soft)}
.wr-now.has>h2{color:var(--signal)}
.wr-item{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--seam-soft)}
.wr-item:last-child{border-bottom:0}
.wr-item .t{font-size:15px;color:var(--ink);font-weight:600;margin:0}
.wr-item .w{font-size:13px;color:var(--muted);margin:3px 0 0}
.wr-item .acts{display:flex;gap:8px;flex-wrap:wrap}
.wr-calm{padding:20px 16px;color:var(--ink-2);font-size:14px}
.wr-calm b{color:var(--live);font-weight:600}

/* --------------------------------------------------------------- knoppen -- */
.wb{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--seam);background:var(--raised);color:var(--ink);padding:8px 13px;
  cursor:pointer;border-radius:var(--r);transition:border-color .14s,background .14s}
.wb:hover{border-color:rgba(255,255,255,.26);background:#232b33}
.wb.go{background:var(--live);border-color:var(--live);color:#0B0E10;font-weight:600}
.wb.go:hover{background:#d4ff69}
.wb.off{background:transparent;color:var(--muted)}
.wb:disabled{opacity:.45;cursor:not-allowed}

/* ---------------------------------------------------------------- tabel -- */
.wr-sec{margin:34px 0 0}
.wr-sec>header{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.wr-sec h2{font-family:var(--display);font-size:20px;margin:0;letter-spacing:-.01em}
.wr-sec .hint{font-size:13px;color:var(--muted);margin:0}

.wr-tbl{width:100%;border-collapse:collapse;border:1px solid var(--seam);background:var(--panel);font-size:14px}
.wr-tbl th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);text-align:left;padding:9px 12px;border-bottom:1px solid var(--seam);font-weight:500;white-space:nowrap}
.wr-tbl td{padding:11px 12px;border-bottom:1px solid var(--seam-soft);vertical-align:top}
.wr-tbl tr:last-child td{border-bottom:0}
.wr-tbl tbody tr:hover{background:var(--panel-2)}
.wr-tbl .task{font-weight:600;color:var(--ink);cursor:pointer;background:none;border:0;padding:0;
  text-align:left;font-family:inherit;font-size:14px}
.wr-tbl .task:hover{color:var(--live)}
.wr-tbl .sub{display:block;font-size:12px;color:var(--faint);font-weight:400;margin-top:2px}
.wr-tbl .num{font-family:var(--mono);font-size:13px;color:var(--ink-2);white-space:nowrap}

.tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  padding:3px 7px;border:1px solid currentColor;border-radius:var(--r);white-space:nowrap}
.tag.KEEP{color:var(--keep)}
.tag.DELEGATE{color:var(--delegate)}
.tag.AUTOMATE{color:var(--automate)}
.tag.ELIMINATE{color:var(--eliminate)}
.dot{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);white-space:nowrap}
.dot i{width:7px;height:7px;border-radius:50%;background:var(--faint);flex:none}
.dot.s1 i{background:var(--signal)}
.dot.s2 i{background:var(--automate)}
.dot.s3 i{background:var(--delegate)}
.dot.s4 i{background:var(--live)}

/* ------------------------------------------------------------- detail -- */
.wr-open{border:1px solid var(--live);background:var(--panel-2)}
.wr-detail{padding:0 12px 16px;background:var(--panel-2)}
.wr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px;margin-top:6px}
.fld label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.fld textarea,.fld input,.fld select{width:100%;background:var(--graphite);color:var(--ink);
  border:1px solid var(--seam);border-radius:var(--r);padding:8px 10px;font-family:var(--sans);
  font-size:13.5px;line-height:1.5;resize:vertical}
.fld textarea:focus,.fld input:focus,.fld select:focus{outline:0;border-color:var(--live)}
.fld textarea{min-height:92px}
.wr-detail .bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid var(--seam-soft)}
.wr-detail .bar .right{margin-left:auto;display:flex;gap:8px}

/* --------------------------------------------------------------- plan -- */
.plan{border:1px solid var(--seam);background:var(--panel-2);padding:14px 16px;margin-top:10px}
.plan h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin:0 0 8px}
.plan ol{margin:0;padding-left:19px;font-size:13.5px;color:var(--ink-2);line-height:1.65}
.plan .cost{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid var(--seam-soft);
  font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.plan .cost b{color:var(--ink)}

/* ------------------------------------------------------------- melding -- */
.wr-say{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);z-index:60;
  background:var(--raised);border:1px solid var(--seam);border-left:3px solid var(--live);
  color:var(--ink);padding:12px 18px;font-size:14px;max-width:min(560px,92vw);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.wr-say.on{opacity:1;transform:translateX(-50%) translateY(0)}
.wr-say.bad{border-left-color:var(--eliminate)}

.wr-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;
  border:1px dashed var(--seam);padding:12px;background:var(--panel)}
.wr-add input{flex:1 1 230px;min-width:0}
.wr-add select{flex:0 0 auto;width:auto}

.wr-empty{border:1px solid var(--seam);background:var(--panel);padding:22px 18px;color:var(--ink-2);font-size:14px}
.wr-empty b{color:var(--ink)}
.wr-load{font-family:var(--mono);font-size:12px;color:var(--muted);padding:26px 0}

@media(max-width:760px){
  .wr-kpi{grid-template-columns:1fr}
  .wr-tbl thead{display:none}
  .wr-tbl,.wr-tbl tbody,.wr-tbl tr,.wr-tbl td{display:block;width:100%}
  .wr-tbl tr{border-bottom:1px solid var(--seam)}
  .wr-tbl td{border:0;padding:5px 12px}
  .wr-tbl td:first-child{padding-top:12px}
  .wr-tbl td:last-child{padding-bottom:12px}
}