:root{
  --bg: #0e0f12;
  --panel: #17181d;
  --panel-2: #1d1f26;
  --text: #f4f6fb;
  --muted: #c0c6d6;
  --card-outline: #2b2f3b;
  --shadow: 0 12px 36px rgba(0,0,0,.35);

  --badge-bg: #242a38;
  --overdue-bg: #3c3112;
  --hold-bg: #273140;

  /* popup */
  --flash-text: #fff; /* JS zet dit naar #000 als bg groen/blauw/helder is */
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; background:#0c0d11; color:var(--text); font: 18px/1.5 system-ui, Segoe UI, Roboto, Arial; }

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px;
  background:linear-gradient(180deg, rgba(18,20,26,.9), rgba(18,20,26,.6));
  border-bottom:1px solid #232735;
  backdrop-filter: blur(6px);
}
.topbar .now{ font-size:42px; font-weight:800; letter-spacing:.5px; }
.topbar .brand{ font-size:42px; font-weight:800; letter-spacing:.3px; color:#e5e9f5; }

/* Debug bar */
.debugbar{
  display:none; /* zet op flex om zichtbaar te maken */
  align-items:center; gap:8px;
  padding:8px 12px; border-bottom:1px dashed #2b2f3b;
  background:#12141a; position:sticky; top:86px; z-index:5;
}
.dbg{ padding:8px 10px; border-radius:8px; border:1px solid #2b2f3b; background:#1a1d24; color:#e7ecfb; cursor:pointer; }
.dbg:hover{ background:#222634; }
.dbg-spacer{ flex:1; }
.dbg-info{ color:#c8cee2; font-size:14px; }

/* Grid */
.grid{
  display:grid; grid-template-columns: 1fr 1fr 1fr;
  gap:16px; padding:16px; width:100%;
}
.col{
  background:var(--panel); border:1px solid #202334; border-radius:16px;
  box-shadow: var(--shadow);
  display:flex; flex-direction:column;
  min-height: calc(100vh - 180px);
}
.col h2{ margin: 14px 16px; font-size:18px; color:#cfd6e6; font-weight:700; letter-spacing:.2px; }
.col-scroll{
  overflow: auto;
  padding:12px 12px 18px;
  display:flex; flex-direction:column; gap:14px;
  scrollbar-width: thin;
  scrollbar-color: #0a0a0a #1b1b1b;
}
.col-scroll::-webkit-scrollbar{ width: 10px; height: 10px; }
.col-scroll::-webkit-scrollbar-track{ background:#1b1b1b; }
.col-scroll::-webkit-scrollbar-thumb{ background:#0a0a0a; border-radius:10px; }
.col-scroll::-webkit-scrollbar-thumb:hover{ background:#111; }

.scroll-spacer{ height: 80px; flex: 0 0 auto; }

/* Cards */
.task{
  position:relative;
  border-radius:14px;
  min-height: 320px;
  padding:16px 16px 14px;
  border: 1px solid var(--card-outline);
  background: var(--panel-2);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  color: #fff;
  overflow: hidden; /* blok lekt niet naar volgende */
  flex: 0 0 auto;   /* kaarten krimpen niet */
}
.task .shade{
  position:absolute; inset:0; border-radius:14px; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.35));
}
.task-top{ position:relative; display:grid; grid-template-columns: 1fr auto auto; gap:12px; align-items:center; z-index:1; }
.task-medewerker{ font-weight:800; font-size:25px; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.task-due{ font-variant-numeric: tabular-nums; color: var(--muted); font-size:16px; }
.task-badges{ display:flex; gap:10px; }

.badge{
  width:44px; height:44px; border-radius:999px;
  background:var(--badge-bg); border:1px solid #3a4154;
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 0 10px rgba(0,0,0,.3);
}
.badge .ico{ display:block; font-size:26px; line-height:1; }
.badge-overdue{ background: var(--overdue-bg); border-color:#7b6420; }
.badge-hold{ background: var(--hold-bg); border-color:#3c5a7d; }

.task-title{
  position:relative; z-index:1;
  margin: 10px 0 8px;
  font-size:28px; font-weight:900; letter-spacing:.2px;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.task-body{
  position:relative; z-index:1;
  color:#eef2ff; font-size:22px;
  white-space: pre-wrap;
  overflow: auto;              /* interne scroll voor lange tekst */
  max-height: 190px;           /* past binnen min-height (320) */
  overflow-wrap: anywhere;
  text-shadow:0 1px 2px rgba(0,0,0,.5);

  scrollbar-width: thin;
  scrollbar-color: #0a0a0a #1b1b1b;
}
.task-body::-webkit-scrollbar{ width: 10px; height: 10px; }
.task-body::-webkit-scrollbar-track{ background:#1b1b1b; }
.task-body::-webkit-scrollbar-thumb{ background:#0a0a0a; border-radius:10px; }
.task-body::-webkit-scrollbar-thumb:hover{ background:#111; }

.task.is-overdue{
  outline: 2px solid #ffd34a;
  box-shadow: 0 0 0 4px rgba(255,211,74,.18), 0 12px 36px rgba(0,0,0,.35);
}

/* Flash overlay - performance friendly */
#board.blurred{ filter: blur(5px) saturate(0.9); pointer-events:none; }

.flash{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.45);
  z-index:50;

  /* i.p.v. display:none -> composited fade */
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s linear, visibility 0s linear .12s;
  will-change: opacity;
}
.flash.show{
  opacity: 1;
  visibility: visible;
  transition: opacity .12s linear, visibility 0s;
}

.flash-card{
  --txt: var(--flash-text);
  width:min(1100px, 92vw); max-height:85vh; overflow:auto;
  border-radius:18px;
  border: 2px solid rgba(0,0,0,.25); /* donkerder rand voor contrast */
  background: #ffe0e0;
  padding: 28px 30px; box-shadow: 0 24px 100px rgba(0,0,0,.5);
  transform-origin:center center;
  color: var(--txt);

  will-change: transform, box-shadow;
  backface-visibility: hidden;
  transform: translateZ(0);
}

  .flash-icon{
    font-size: 90px; text-align:center; margin-bottom: 6px;
    text-shadow: 0 2px 6px rgba(0,0,0,.35);
  }
  .flash-medewerker{ text-align:center; font-weight:800; font-size:32px; margin-bottom:8px; }
  .flash-title{ text-align:center; font-weight:900; font-size:46px; margin-bottom:12px; }
  .flash-body{ text-align:center; font-size:28px; white-space: pre-wrap; }


.pop-in{ animation: popZoom .35s ease-out forwards; }
@keyframes popZoom{ 0%{opacity:0; transform: scale(.8);} 100%{opacity:1; transform: scale(1);} }

/* Minder animatie op low-perf / accessibility */
@media (prefers-reduced-motion: reduce) {
  .pop-in{ animation: none; }
  #board.blurred{ filter:none; }
  .flash{ transition: none; }
}

/* Errors */
.error{ margin:12px 16px; background:#3e1515; border:1px solid #6a2a2a; color:#ffdcdc; padding:12px 16px; border-radius:10px; }

/* Responsive */
@media (max-width: 1200px){
  .topbar .now, .topbar .brand{ font-size: 34px; }
}
@media (max-width: 1100px){
  .grid{ grid-template-columns: 1fr; }
  .col{ min-height:auto; }
}