/* ===== Daily Task Flow Board ===== */

.board-controls{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;
}
.board-controls input[type=date]{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:6px 8px;background:#fff;
}

.stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.stat{
  min-width:96px;background:var(--panel);border:1px solid #fff;
  border-radius:14px;padding:7px 10px;box-shadow:var(--shadow-sm);
}
.stat b{display:block;font-size:17px}
.stat span{font-size:11px;color:var(--muted)}

.board-toolbar{
  display:flex;gap:10px;padding:10px 22px;
  background:#ffffffc7;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:3;
}
.board-toolbar input{
  flex:1;min-width:220px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:#fff;padding:8px 10px;
}

.board-wrap{position:relative;height:calc(100vh - 200px);min-height:420px;overflow:hidden}
.board{
  position:absolute;inset:0;overflow:auto;
  background-color:#fbfcff;
  background-image:linear-gradient(#3858e914 1px,transparent 1px),
                   linear-gradient(90deg,#3858e914 1px,transparent 1px);
  background-size:28px 28px;
}
.canvas{position:relative;width:2400px;height:1450px}
.links{position:absolute;inset:0;width:2400px;height:1450px;pointer-events:none;z-index:1}

/* ===== Card ===== */
.card{
  position:absolute;
  width:clamp(180px,18vw,220px);
  min-height:clamp(230px,32vh,280px);
  display:flex;flex-direction:column;gap:5px;
  padding:8px;border-radius:14px;
  background:#fff5b8;
  border:1px solid #00000012;box-shadow:var(--shadow);z-index:2;
}
.card.compact{height:96px;min-height:96px;overflow:hidden;gap:4px;padding:7px 8px}
.card.done{background:#ddf8df}
.card.deleted{background:#f7d8d8;opacity:.92}
.card.deleted textarea{text-decoration:line-through}
.card.carry1{background:#ffe1aa}
.card.carry2{background:#ffc876}
.card.carry4{background:#ffc1cf}

.card .head{display:flex;gap:4px;align-items:center}
.card .icon{
  width:22px;height:22px;padding:0;
  display:grid;place-items:center;
  background:#ffffffaa;border:1px solid #fff;
  font-weight:900;font-size:12px;border-radius:8px;
  cursor:pointer;
}
.card .badge{
  font-size:10px;font-weight:800;
  background:#ffffff99;border:1px solid #fff;
  border-radius:99px;padding:3px 6px;
  max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;
}
.card .check.done{background:var(--success);color:#fff}
.card .delete{color:var(--danger)}
.card textarea{
  flex:1;resize:none;border:0;border-radius:10px;
  background:#ffffff70;padding:6px 8px;outline:0;
  line-height:1.3;font-size:12.5px;min-height:44px;
}
.card.compact textarea{max-height:32px;font-size:12px}
.card .meta{font-size:10px;color:#475467;line-height:1.25}
.card .handle{
  position:absolute;right:-11px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:grid;place-items:center;font-weight:900;
  cursor:crosshair;box-shadow:0 6px 14px #3858e952;font-size:12px;
}

/* ===== Allegati ===== */
.att-box{
  background:#ffffff8a;border:1px solid #ffffffcc;
  border-radius:10px;padding:5px 6px;
  font-size:10.5px;color:#475467;
}
.att-head{display:flex;align-items:center;gap:5px;font-weight:800;margin-bottom:4px}
.att-head .att-label{flex:1;font-size:10.5px}
.att-btn{
  background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:2px 6px;
  font-size:10px;font-weight:700;cursor:pointer;
}
.att-list{display:flex;flex-direction:column;gap:3px;max-height:160px;overflow:auto}
.att-row{
  display:flex;align-items:center;gap:5px;
  background:#fff;border:1px solid #f0f2f7;
  border-radius:8px;padding:3px 5px;
}
.att-thumb{
  width:40px;height:40px;border-radius:6px;
  background:#f2f4f7;display:grid;place-items:center;
  font-size:18px;flex-shrink:0;overflow:hidden;
  cursor:pointer;border:1px solid #eef0f5;
}
.att-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.att-name{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  cursor:pointer;color:var(--text);font-weight:600;font-size:10.5px;
}
.att-name:hover{color:var(--brand);text-decoration:underline}
.att-size{font-size:9.5px;color:var(--muted);flex-shrink:0}
.att-remove{
  background:var(--danger-soft);color:var(--danger);
  border:0;border-radius:6px;width:18px;height:18px;padding:0;
  font-weight:800;cursor:pointer;font-size:11px;line-height:1;flex-shrink:0;
}
.att-count{
  font-size:10px;color:#475467;font-weight:700;
  background:#ffffff99;border-radius:99px;padding:2px 7px;
  display:inline-block;width:fit-content;
}
.att-error{
  color:var(--danger);font-size:9.5px;margin-top:3px;line-height:1.25;
}

/* ===== Responsive board ===== */
@media (max-width:1100px){
  .card{width:180px;min-height:230px}
}
@media (max-width:900px){
  .board-wrap{height:calc(100vh - 240px)}
  .card{width:170px;min-height:210px}
}