.tasks-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:24px
}

.tasks-head h2{
  margin:0 0 4px;
  font-size:28px;
  line-height:1.15
}

.tasks-head p{
  margin:0;
  font-size:15px
}

.tasks-head button{
  min-height:46px;
  padding:0 20px;
  border-radius:12px;
  font-weight:700;
  white-space:nowrap
}

.tasks-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:18px
}

.task-metric{
  min-height:105px;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  border-radius:16px
}

.task-metric span{
  font-size:14px;
  font-weight:600;
  opacity:.7
}

.task-metric strong{
  font-size:34px;
  line-height:1;
  font-weight:800
}

.tasks-toolbar{
  display:grid;
  grid-template-columns:minmax(260px,2fr) minmax(190px,1fr) minmax(190px,1fr);
  gap:12px;
  padding:14px;
  margin-bottom:18px;
  border-radius:16px
}

.tasks-toolbar input,
.tasks-toolbar select{
  width:100%;
  min-height:46px;
  padding:0 14px;
  border-radius:10px;
  box-sizing:border-box
}

.tasks-list{
  display:flex;
  flex-direction:column;
  gap:12px
}

.task-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:18px 20px;
  border-radius:16px
}

.task-card-main{
  flex:1;
  min-width:0
}

.task-title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px
}

.task-title-row strong{
  font-size:16px
}

.task-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:8px;
  font-size:13px;
  opacity:.75
}

.task-card p{
  margin:10px 0 0;
  line-height:1.5
}

.task-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end
}

.task-actions button{
  white-space:nowrap
}

.task-priority{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:2px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  background:rgba(120,120,120,.12)
}

.task-overdue{
  border-left:4px solid currentColor
}

.task-overdue-label{
  font-weight:700
}

.task-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px
}

.task-modal-card{
  width:min(720px,94vw)
}

.task-modal-card textarea{
  width:100%;
  box-sizing:border-box;
  resize:vertical
}

.tasks-message{
  margin-bottom:12px
}

.task-empty{
  text-align:center;
  padding:36px 20px;
  border-radius:16px
}

@media(max-width:1050px){
  .tasks-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .tasks-toolbar{
    grid-template-columns:1fr 1fr
  }

  .tasks-toolbar input{
    grid-column:1/-1
  }
}

@media(max-width:700px){
  .tasks-head{
    flex-direction:column;
    align-items:stretch
  }

  .tasks-head button{
    width:100%
  }

  .tasks-toolbar{
    grid-template-columns:1fr
  }

  .tasks-toolbar input{
    grid-column:auto
  }

  .task-card{
    flex-direction:column;
    align-items:stretch
  }

  .task-actions{
    justify-content:flex-start
  }

  .task-form-grid{
    grid-template-columns:1fr
  }
}

@media(max-width:480px){
  .tasks-metrics{
    grid-template-columns:1fr
  }

  .task-metric{
    min-height:88px
  }
}


/* =====================================================
   TASKS MOBILE UX V2
   ===================================================== */

@media(max-width:900px){

  #tasks,
  #tasks *{
    box-sizing:border-box;
  }

  #tasks .tasks-head{
    width:100% !important;
    align-items:stretch !important;
    gap:10px !important;
  }

  #tasks .tasks-head button{
    min-height:44px !important;
  }

  #tasks .tasks-toolbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    gap:8px !important;
  }

  #tasks .tasks-toolbar input,
  #tasks .tasks-toolbar select{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:44px !important;
    min-height:44px !important;
  }

  #tasks .tasks-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #tasks .task-card{
    width:100% !important;
    min-width:0 !important;
  }

  #tasks .task-card-main{
    min-width:0 !important;
  }

  #tasks .task-title-row{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  #tasks .task-title-row strong{
    min-width:0 !important;
    overflow-wrap:anywhere !important;
  }

  #tasks .task-meta{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:6px 10px !important;
  }

  #tasks .task-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  #tasks .task-actions button{
    flex:1 1 140px !important;
    min-height:44px !important;
  }

  #tasks .task-form-grid{
    grid-template-columns:1fr !important;
  }

  #tasks .task-modal-card{
    width:100% !important;
    max-width:100% !important;
  }
}


@media(max-width:520px){

  #tasks .tasks-metrics{
    grid-template-columns:1fr 1fr !important;
  }
}

/* =====================================================
   TASKS MOBILE UX V2
   ===================================================== */

@media(max-width:900px){

  #tasks,
  #tasks *{
    box-sizing:border-box;
  }

  .tasks-head{
    width:100% !important;
    max-width:100% !important;
    gap:10px !important;
  }

  .tasks-head button{
    min-height:44px !important;
  }

  .tasks-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .tasks-toolbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    gap:8px !important;
  }

  .tasks-toolbar input,
  .tasks-toolbar select{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:44px !important;
  }

  .tasks-list{
    width:100% !important;
    min-width:0 !important;
  }

  .task-card{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    gap:10px !important;
  }

  .task-card-main{
    min-width:0 !important;
  }

  .task-title-row{
    flex-wrap:wrap !important;
    gap:7px !important;
  }

  .task-title-row strong{
    min-width:0 !important;
    overflow-wrap:anywhere !important;
  }

  .task-meta{
    flex-wrap:wrap !important;
    gap:6px !important;
  }

  .task-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  .task-actions button{
    flex:1 1 140px !important;
    min-height:44px !important;
  }

  .task-form-grid{
    grid-template-columns:1fr !important;
  }

  .task-modal-card{
    width:100% !important;
    max-width:100% !important;
    max-height:92dvh !important;
    overflow-y:auto !important;
  }
}

@media(max-width:520px){

  .tasks-metrics{
    grid-template-columns:1fr 1fr !important;
  }

  .tasks-head button{
    width:100% !important;
  }
}