/*
  ============================================================
  Detective Notes - Hoofdstylesheet
  ============================================================
  Dit bestand bevat alle layout-, kleur- en componentstijlen.
  Door CSS los te trekken uit HTML blijft de pagina onderhoudbaar.
*/

:root{
  --text:#e9ecf1;
  --muted:#a9b1c2;
  --line:#24304a;
  --panel:#0f1320;
  --panel2:#0b0d12;

  --state0:#ffffff;
  --state1:#d8dbe2;
  --state2:#ffb3b3;
  --state3:#b7f7c7;

  --row0:#0a0d14;
  --row1:#585b60;
  --row2:#4b2121;
  --row3:#1d3826;

  --itemText:#0f0f12;
  --topbarH:52px;

  --appPad:10px;
  --rowMin:34px;
  --cellPadY:4px;
  --cellPadX:6px;
  --sectionFont:11px;
  --itemFont:13px;
  --iconFont:18px;
  --iconW:54px;
  --itemW:minmax(175px,1.2fr);
  --noteW:minmax(210px,1.6fr);
  --noteMinH:28px;
  --bottomNoteMinH:110px;
  --miniIco:18px;
  --markPad:6px;
}

/* Grote modus: alle leesbare onderdelen worden ruim opgeschaald. */
body.large{
  --appPad:12px;
  --rowMin:52px;
  --cellPadY:1px;
  --cellPadX:2px;
  --sectionFont:18px;
  --itemFont:24px;
  --iconFont:30px;
  --iconW:84px;
  --itemW:minmax(260px,1.6fr);
  --noteW:minmax(160px,1fr);
  --noteMinH:42px;
  --bottomNoteMinH:160px;
  --miniIco:28px;
  --markPad:10px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,#06070a 0%,#0b0d12 100%);
  color:var(--text);
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

.app{
  max-width:980px;
  margin:0 auto;
  padding:var(--appPad);
}

/*
  Sticky topbar blijft altijd bovenaan zichtbaar.
  De kolomheaders gebruiken de hoogte van deze topbar als offset.
*/
.topbar{
  position:sticky;
  top:0;
  z-index:60;
  padding:8px 0;
  background:#0b0d12;
  border-bottom:1px solid var(--line);
}

.title{
  text-align:center;
  letter-spacing:0.2em;
  font-weight:900;
  font-size:16px;
}
body.large .title{ font-size:20px; }

.help-text{
  color:var(--text);
  font-size:13px;
  line-height:1.55;
  white-space:pre-line;
}
body.large .help-text{ font-size:15px; }
.help-text b{ color:#fff; }

.board-wrap{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#0b0d12;
}

.scroll-x{
  overflow-x:auto;
  overflow-y:clip;
  -webkit-overflow-scrolling:touch;
}

.grid{
  min-width:650px;
  display:grid;
  grid-auto-rows:minmax(var(--rowMin), auto);
  border-top:1px solid var(--line);
  align-items:stretch;
}

.cell{
  padding:var(--cellPadY) var(--cellPadX);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  background:var(--panel2);
  min-width:0;
}

.section{
  background:#0f1320;
  font-size:var(--sectionFont);
  letter-spacing:0.10em;
  color:var(--muted);
  text-transform:uppercase;
  font-weight:900;
}

/*
  Spelerheaders blijven sticky tijdens verticaal scrollen.
  De top-offset wordt dynamisch gezet vanuit JavaScript.
*/
.col-header{
  position:sticky;
  top:var(--topbarH);
  z-index:120;
  background:#101727;
  box-shadow:0 1px 0 var(--line);
}

.section-header{
  background:#0f1320 !important;
}

.cell.item{
  padding:0;
  align-items:stretch;
  background:transparent;
}

.item{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

.item-name{
  font-weight:850;
  background:var(--state0);
  color:var(--itemText);
  border-radius:10px;
  padding:4px 6px;
  width:100%;
  height:100%;
  line-height:1.05;
  font-size:var(--itemFont);
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  min-width:0;
}
body.large .item-name{ padding:10px 12px; gap:12px; }

.mini-ico{
  width:var(--miniIco);
  height:var(--miniIco);
  flex:0 0 var(--miniIco);
  display:block;
  opacity:0.92;
}

.mark-ico{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  filter:invert(1);
  opacity:0.95;
  pointer-events:none;
}

.icon{
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:var(--markPad) !important;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  font-size:var(--iconFont);
  font-weight:900;
  line-height:1;
}

.mark-text{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  color:#fff;
}

.note textarea,
.bottom-note textarea{
  width:100%;
  resize:vertical;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--text);
  padding:8px 10px;
  font-size:16px;
  line-height:1.2;
  outline:none;
}

.note textarea{ min-height:var(--noteMinH); }
.bottom-note textarea{ min-height:var(--bottomNoteMinH); }
body.large .note textarea,
body.large .bottom-note textarea{
  padding:10px 12px;
  font-size:18px;
  line-height:1.25;
}

.bottom-note-wrap{
  padding:10px;
  border-top:1px solid var(--line);
  background:#0f1320;
}

.footer{
  display:flex;
  gap:8px;
  padding:8px;
  border-top:1px solid var(--line);
  background:#0f1320;
  position:sticky;
  bottom:0;
  z-index:20;
  align-items:center;
}

button{
  border:1px solid var(--line);
  background:#1a2340;
  color:var(--text);
  border-radius:12px;
  padding:9px;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
}
body.large button{ font-size:15px; padding:10px; }

.btn-grow{ flex:1; }
.btn-help{ margin-left:auto; }
.btn-gear{
  width:44px;
  min-width:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  font-weight:900;
}
body.large .btn-gear{ width:48px; min-width:48px; font-size:18px; }
button:disabled{ opacity:0.4; cursor:not-allowed; }

.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:999;
}

.modal{
  width:min(560px,100%);
  max-height:min(88vh,860px);
  overflow:auto;
  background:#0f1320;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6);
}

.modal header{
  padding:12px 12px 10px;
  border-bottom:1px solid var(--line);
  font-weight:900;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--muted);
}
body.large .modal header{ font-size:13px; }

.modal .content{
  padding:12px;
  display:grid;
  gap:10px;
}

.field label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:0 0 6px;
}
body.large .field label{ font-size:13px; }

.field input,
.field select{
  width:100%;
  background:rgba(26,35,64,0.55);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:12px;
  padding:10px 10px;
  font-size:16px;
  outline:none;
}
body.large .field input,
body.large .field select{ padding:12px; }

.row-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(26,35,64,0.35);
}
.row-toggle .left{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.row-toggle .left b{ font-size:14px; }
body.large .row-toggle .left b{ font-size:16px; }
.row-toggle .left span{ font-size:12px; color:var(--muted); }
body.large .row-toggle .left span{ font-size:13px; }
.row-toggle input[type="checkbox"]{ width:22px; height:22px; accent-color:#6ea8ff; }

.modal footer{
  display:flex;
  gap:10px;
  padding:12px;
  border-top:1px solid var(--line);
  background:#0b0d12;
  position:sticky;
  bottom:0;
}

.ghost{ background:transparent; }