:root{
  --ukbota-blue:#24527a;
  --ukbota-blue-dark:#18364f;
  --ukbota-blue-deep:#12283a;
  --ukbota-blue-mid:#3978a8;
  --ukbota-blue-light:#e8f0f7;

  /* Main greys */
  --ukbota-panel:#ffffff;
  --ukbota-panel-light:#e3e7ea;
  --ukbota-panel-grey:#dfe4e8;

  /* Text */
  --ukbota-text:#1f252a;
  --ukbota-muted:#3f4b54;

  /* Borders */
  --ukbota-line:#b4bec6;
  --ukbota-line-light:#c4cdd3;

  --ukbota-shadow:rgba(0,0,0,.13);
}


/* ============================================================
   MAIN TASKING CONTAINER
   ============================================================ */

.wwbota-tasking-v2{
  font-family:Arial,Helvetica,sans-serif;

  color:var(--ukbota-text);

  background:#eef1f3;

  border:1px solid var(--ukbota-line);

  border-radius:12px;

  padding:22px;

  box-sizing:border-box;

  box-shadow:
    0 10px 35px var(--ukbota-shadow);
}

.wwbota-tasking-v2 *{
  box-sizing:border-box;
}

.wwbota-tasking-v2 button,
.wwbota-tasking-v2 input,
.wwbota-tasking-v2 select,
.wwbota-tasking-v2 textarea{
  font-family:inherit;
}


/* ============================================================
   HEADER
   ============================================================ */

.t2-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:18px;
}

.t2-kicker{
  font-size:10px;
  letter-spacing:2px;
  color:var(--ukbota-blue);
  font-weight:700;
}

.t2-header h2{
  margin:4px 0;
  font-size:27px;
  letter-spacing:1px;
  color:var(--ukbota-blue-dark);
}

.t2-header p{
  margin:0;
  color:#46515d;
  font-size:13px;
}


/* ============================================================
   STATS
   ============================================================ */

.t2-stats{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.t2-stats span,
.t2-popup-stats span{
  font-size:9px;
  letter-spacing:1px;
  color:#46515d;
  background:var(--ukbota-panel-grey);
  border:1px solid var(--ukbota-line);
  padding:8px 10px;
  border-radius:5px;
}

.t2-stats b,
.t2-popup-stats b{
  color:var(--ukbota-blue);
  font-size:12px;
}


/* ============================================================
   FILTERS
   ============================================================ */

.t2-filters{
  display:flex;
  gap:7px;
  border-bottom:1px solid var(--ukbota-line);
  padding-bottom:14px;
  margin-bottom:18px;
}

.t2-filter{
  appearance:none!important;

  background:var(--ukbota-panel-grey)!important;

  color:var(--ukbota-blue-dark)!important;

  border:1px solid var(--ukbota-line)!important;

  padding:8px 12px!important;

  border-radius:5px!important;

  font-size:10px!important;

  letter-spacing:1px;

  cursor:pointer;

  line-height:1.2!important;
}

.t2-filter.active,
.t2-filter:hover{
  background:var(--ukbota-blue)!important;

  color:#fff!important;

  border-color:var(--ukbota-blue)!important;
}


/* ============================================================
   MEMBER CARDS
   ============================================================ */

.t2-member-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.t2-member-card{
  background:var(--ukbota-panel-light);

  border:1px solid var(--ukbota-line);

  border-radius:10px;

  padding:15px;

  min-width:0;

  box-shadow:
    0 4px 12px rgba(0,0,0,.07);
}

.t2-member-head{
  width:100%;
  min-height:76px;

  display:flex;
  align-items:center;
  gap:10px;

  background:transparent!important;

  border:0!important;

  border-bottom:1px solid var(--ukbota-line)!important;

  border-radius:0!important;

  color:inherit!important;

  padding:0 0 12px!important;

  margin:0!important;

  text-align:left;

  cursor:pointer;

  box-shadow:none!important;

  appearance:none!important;
}

.t2-member-head:hover{
  background:rgba(36,82,122,.05)!important;
}

.t2-member-head:focus{
  outline:1px solid var(--ukbota-blue);
  outline-offset:3px;
}

.t2-avatar{
  width:42px;
  height:42px;
  min-width:42px;

  display:grid;
  place-items:center;

  border:1px solid var(--ukbota-blue);

  color:var(--ukbota-blue);

  border-radius:50%;

  background:var(--ukbota-blue-light);

  font-weight:700;

  font-size:18px;
}

.t2-member-info{
  min-width:0;
  flex:1;
}

.t2-member-info h3{
  margin:0!important;
  padding:0!important;

  font-size:15px!important;
  line-height:1.25!important;

  color:var(--ukbota-blue-dark)!important;
}

.t2-member-info h3 span{
  font-size:11px;

  color:var(--ukbota-blue);

  font-weight:400;

  margin-left:4px;
}

.t2-member-info p{
  margin:4px 0 0!important;

  color:#46515d!important;

  font-size:10px!important;

  line-height:1.45!important;
}

.t2-view{
  flex:0 0 58px;

  text-align:center;

  color:#46515d;

  font-size:9px;

  letter-spacing:1px;

  line-height:1.4;
}

.t2-member-head:hover .t2-view{
  color:var(--ukbota-blue);
}


/* ============================================================
   TASKS
   ============================================================ */

.t2-task-list{
  min-height:54px;

  padding:10px 0 4px;
}

.t2-task{
  border:1px solid var(--ukbota-line-light);

  border-left:3px solid #697681;

  background:#f7f8f9;

  border-radius:6px;

  padding:9px;

  margin-bottom:7px;

  box-shadow:
    0 2px 5px rgba(0,0,0,.04);
}

.t2-task.priority-important{
  border-left-color:#9a7a32;
}

.t2-task.priority-urgent{
  border-left-color:#b34b4b;
}

.t2-task.is-complete{
  opacity:.55;
}

.t2-task.is-complete strong{
  text-decoration:line-through;
}

.t2-task-row{
  display:flex;

  gap:8px;

  align-items:flex-start;
}

.t2-check{
  appearance:none!important;

  width:33px!important;
  height:33px!important;
  min-width:33px!important;

  border:1px solid #8e9aa4!important;

  background:#eef1f3!important;

  color:var(--ukbota-blue)!important;

  border-radius:5px!important;

  cursor:pointer;

  padding:0!important;

  font-size:18px!important;

  line-height:31px!important;

  text-align:center;
}

.t2-check:hover{
  background:var(--ukbota-blue-light)!important;

  border-color:var(--ukbota-blue)!important;
}

.t2-task-content{
  min-width:0;

  flex:1;
}

.t2-task-content strong{
  display:block;

  font-size:12px;

  line-height:1.4;

  color:#252b30;
}

.t2-task-meta{
  display:flex;

  gap:8px;

  flex-wrap:wrap;

  color:#46515d;

  font-size:9px;

  margin-top:5px;
}

.t2-priority{
  margin-left:auto;

  text-transform:uppercase;

  letter-spacing:.7px;
}

.t2-urgent{
  color:#a43f3f;
}

.t2-important{
  color:#80642e;
}

.t2-task-notes{
  margin-top:8px;

  border-top:1px solid var(--ukbota-line-light);

  padding-top:7px;

  color:#4b5660;

  font-size:10px;

  line-height:1.5;
}

.t2-task-actions{
  display:flex;

  justify-content:flex-end;

  gap:8px;

  margin-top:6px;
}

.t2-task-actions button{
  appearance:none!important;

  border:0!important;

  background:none!important;

  color:#4b5660!important;

  font-size:8px!important;

  cursor:pointer;

  padding:2px!important;
}

.t2-task-actions button:hover{
  color:var(--ukbota-blue)!important;
}


/* ============================================================
   ADD TASK
   ============================================================ */

.t2-add-task,
.t2-popup-add{
  appearance:none!important;

  width:100%;

  border:1px dashed #8796a2!important;

  background:#f0f3f5!important;

  color:var(--ukbota-blue)!important;

  padding:9px!important;

  border-radius:6px!important;

  cursor:pointer;

  font-size:9px!important;

  letter-spacing:1px;
}

.t2-add-task:hover,
.t2-popup-add:hover{
  background:var(--ukbota-blue-light)!important;

  border-color:var(--ukbota-blue)!important;
}


/* ============================================================
   CARD FOOTER
   ============================================================ */

.t2-card-footer{
  display:flex;

  justify-content:space-between;

  margin-top:9px;
}

.t2-card-footer span{
  color:#46515d;

  font-size:8px;

  letter-spacing:1px;
}


/* ============================================================
   MODALS
   ============================================================ */

.t2-modal{
  display:none;

  position:fixed;

  inset:0;

  z-index:999999;
}

.t2-modal.is-open{
  display:block;
}

.t2-backdrop{
  position:absolute;

  inset:0;

  background:rgba(20,28,35,.72);
}

.t2-member-modal,
.t2-task-modal{
  position:relative;

  z-index:2;

  background:#ffffff;

  border:1px solid var(--ukbota-line);

  border-radius:10px;

  box-shadow:
    0 25px 80px rgba(0,0,0,.35);
}

.t2-member-modal{
  width:min(760px,calc(100% - 30px));

  max-height:88vh;

  overflow:auto;

  margin:5vh auto;

  padding:22px;
}

.t2-task-modal{
  width:min(520px,calc(100% - 30px));

  max-height:90vh;

  overflow:auto;

  margin:5vh auto;

  padding:22px;
}

.t2-modal-close{
  position:absolute!important;

  right:10px!important;

  top:7px!important;

  background:transparent!important;

  border:0!important;

  color:#46515d!important;

  font-size:27px!important;

  cursor:pointer!important;

  padding:2px 8px!important;

  line-height:1!important;
}

.t2-modal-close:hover{
  color:var(--ukbota-blue)!important;
}

.t2-popup-head{
  display:flex;

  gap:12px;

  align-items:center;

  padding-bottom:16px;

  border-bottom:1px solid var(--ukbota-line);
}

.t2-popup-head h3{
  margin:3px 0!important;

  color:var(--ukbota-blue-dark)!important;

  font-size:22px!important;
}

.t2-popup-head p{
  margin:3px 0;

  color:#46515d;

  font-size:11px;
}

.t2-popup-stats{
  display:flex;

  gap:8px;

  margin:15px 0;
}

.t2-popup-stats span{
  background:var(--ukbota-panel-grey);
}

.t2-popup-section{
  margin-top:16px;
}

.t2-section-title{
  font-size:10px;

  letter-spacing:1.5px;

  color:var(--ukbota-blue);

  font-weight:700;

  border-bottom:1px solid var(--ukbota-line);

  padding-bottom:7px;

  margin-bottom:8px;
}

.t2-empty{
  border:1px dashed var(--ukbota-line);

  color:#46515d;

  padding:14px;

  text-align:center;

  border-radius:6px;

  font-size:10px;
}


/* ============================================================
   FORM
   ============================================================ */

.t2-task-modal h3{
  margin:5px 0 18px;

  color:var(--ukbota-blue-dark);

  font-size:20px;
}

.t2-task-modal label{
  display:block;

  color:#46515d;

  font-size:10px;

  text-transform:uppercase;

  letter-spacing:1px;

  margin-bottom:12px;
}

.t2-task-modal input,
.t2-task-modal select,
.t2-task-modal textarea{
  display:block;

  width:100%;

  margin-top:5px;

  background:#fff!important;

  border:1px solid #bfc6cc!important;

  border-radius:5px!important;

  color:#22272b!important;

  padding:10px!important;

  font-size:12px!important;
}

.t2-task-modal input:focus,
.t2-task-modal select:focus,
.t2-task-modal textarea:focus{
  outline:none;

  border-color:var(--ukbota-blue)!important;

  box-shadow:
    0 0 0 2px rgba(57,120,168,.12);
}

.t2-two{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:12px;
}

.t2-form-actions{
  display:flex;

  justify-content:flex-end;

  gap:8px;

  margin-top:16px;
}

.t2-form-actions button{
  appearance:none!important;

  padding:10px 15px!important;

  border-radius:5px!important;

  border:1px solid var(--ukbota-line)!important;

  background:#68727c!important;

  color:#fff!important;

  cursor:pointer;

  font-size:10px!important;

  letter-spacing:1px;
}

.t2-form-actions .t2-primary{
  background:var(--ukbota-blue)!important;

  border-color:var(--ukbota-blue)!important;

  color:#fff!important;
}

.t2-form-actions .t2-primary:hover{
  background:#31688f!important;

  border-color:#31688f!important;
}

#t2-form-message{
  margin-top:10px;

  color:#a43f3f;

  font-size:11px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:900px){

  .t2-member-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .t2-header{
    align-items:flex-start;

    flex-direction:column;
  }
}


@media(max-width:600px){

  .wwbota-tasking-v2{
    padding:14px;
  }

  .t2-member-grid{
    grid-template-columns:1fr;
  }

  .t2-two{
    grid-template-columns:1fr;
  }

  .t2-member-modal,
  .t2-task-modal{
    width:calc(100% - 20px);

    margin:3vh auto;
  }
}