import http from 'node:http';

const originalEnd = http.ServerResponse.prototype.end;

const layoutPatch = `<style id="layout-v3">
.card{padding:20px}
.add{grid-template-columns:minmax(0,1fr) 132px 92px;align-items:stretch;gap:10px}
.add input,.add select,.add button{height:46px}
.task{grid-template-columns:40px minmax(0,1fr) 82px;gap:10px 12px;align-items:start;padding:16px 0}
.task>form:first-child{margin-top:2px}
.task>form:first-child button{width:40px;height:40px;padding:0}
.inline-edit{grid-template-columns:minmax(0,1fr) 126px 72px;gap:8px;align-items:center}
.inline-edit input,.inline-edit select,.inline-edit button{height:44px}
.actions{align-self:start;justify-content:flex-end}
.actions button{height:44px;min-width:76px}
.priority{margin-top:8px}
@media(max-width:700px){
  .wrap{padding:24px 14px}
  .card{padding:14px}
  .add{grid-template-columns:minmax(0,1fr) 120px}
  .add button{grid-column:1/-1}
  .task{grid-template-columns:40px minmax(0,1fr)}
  .actions{grid-column:2;justify-content:flex-start}
  .inline-edit{grid-template-columns:minmax(0,1fr) 110px}
  .inline-edit button{grid-column:1/-1;width:max-content}
}
@media(max-width:480px){
  .add{grid-template-columns:1fr}
  .add select,.add button{grid-column:auto}
  .inline-edit{grid-template-columns:1fr}
  .inline-edit button{grid-column:auto;width:100%}
  .actions{grid-column:1/-1;margin-left:52px}
}
</style>`;

http.ServerResponse.prototype.end = function (chunk, encoding, callback) {
  if (typeof chunk === 'string' && chunk.includes('</head>')) {
    chunk = chunk.replace('</head>', `${layoutPatch}</head>`);
  }
  return originalEnd.call(this, chunk, encoding, callback);
};

await import('./server.js');