/* file: web/style/components.tasks.css */

.bd-task-template-form{
  justify-content: space-between;
  gap: 10px;
}
.bd-task-shell{
  gap: 12px;
}
.bd-task-shell-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bd-task-nav-caption{
  margin-top: -2px;
  font-size: 13px;
  font-weight: 700;
  color: #5d6e80;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bd-task-nav{
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bd-task-nav .btn{
  gap: 8px;
}
.bd-task-nav-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.06);
  font-size: 12px;
  font-weight: 800;
}
.btn-primary .bd-task-nav-count{
  background: rgba(255, 255, 255, 0.2);
}
.bd-task-empty{
  padding: 18px 20px;
}
.bd-task-header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border: none;
  background: none;
}
.bd-task-item-form{
  margin: 0;
}
.bd-task-card{
  gap: 6px;
  padding: 12px 14px;
  border-color: #cfdde9;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.bd-task-card-head{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.bd-task-card-main{
  min-width: 0;
  flex: 1 1 auto;
}
.bd-task-meta-primary{
  font-weight: 600;
  color: #32485f;
}
.bd-task-meta-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
  margin-bottom: 3px;
}
.bd-task-status-pill{
  font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.bd-task-status-pill.is-open{
  color: #344054;
  border-color: #cfd4dc;
  background: #f5f7fa;
}
.bd-task-status-pill.is-doing{
  color: #8a4b00;
  border-color: #f0d08a;
  background: #fff8e8;
}
.bd-task-status-pill.is-done{
  color: #0f5132;
  border-color: #9fd7b6;
  background: #eaf8ef;
}
.bd-task-prio-pill{
  font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.bd-task-prio-pill.is-p1{
  color: #842029;
  border-color: #e6b8bf;
  background: #fceef0;
}
.bd-task-prio-pill.is-p2{
  color: #664d03;
  border-color: #ebd899;
  background: #fff9e8;
}
.bd-task-prio-pill.is-p3{
  color: #0f5132;
  border-color: #b6dfc8;
  background: #eefaf2;
}
.bd-task-sub-pill{
  color: #1d4e89;
  border-color: #b8d4f2;
  background: #eef6ff;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.bd-task-due-pill{
  color: #35506b;
  border-color: #c7d5e4;
  background: #f4f8fc;
}
.bd-task-due-hint{
  color: #6d4c00;
  border-color: #ead59f;
  background: #fff9e7;
}
.bd-task-permission-pill{
  font-weight: 700;
}
.bd-task-permission-pill.is-manage{
  color: #0f5132;
  border-color: #b6dfc8;
  background: #eefaf2;
}
.bd-task-permission-pill.is-read{
  color: #5e4710;
  border-color: #ead9a3;
  background: #fff8e8;
}
.bd-task-visibility-pill{
  color: #4e3e78;
  border-color: #d2c7ef;
  background: #f6f2ff;
}
.bd-task-meta-secondary{
  color: #728396;
  font-size: 14px;
  line-height: 1.35;
}
.bd-task-meta-tertiary{
  color: #90a0b1;
  font-size: 13px;
  line-height: 1.3;
}
.bd-subtask-desc{
  margin-top: 2px;
}
.bd-task-meta-access{
  color: #93a1b1;
  font-size: 13px;
  line-height: 1.3;
}
.bd-task-card-actions{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  justify-content: stretch;
  align-items: stretch;
  padding: 6px;
  border: 1px solid #d8e4ef;
  border-radius: 12px;
  background: #f7fbff;
  min-width: min(100%, 420px);
}
.bd-task-shortcuts{
  display: none;
}
.bd-task-block-complete{
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.bd-task-block-complete .button-row{
  margin: 0;
  gap: 6px;
  justify-content: flex-end;
}
.bd-task-btn-icon{
  min-width: 42px;
  justify-content: center;
}
.bd-task-btn-secondary{
  min-height: 40px;
  padding-left: 12px;
  padding-right: 12px;
  border-color: #c6d7ea;
  background: #f3f8ff;
  color: #1d3f63;
  font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.bd-task-btn-secondary:hover{
  background: #eaf3ff;
  border-color: #aac7e7;
  box-shadow: 0 2px 8px rgba(24, 64, 107, 0.12);
}
.bd-task-btn-secondary:active{
  transform: translateY(1px);
}
.bd-task-btn-secondary:focus-visible{
  outline: 2px solid #7fb2e4;
  outline-offset: 2px;
}
.bd-task-meta-badges .dash-pill:hover{
  box-shadow: 0 1px 4px rgba(16, 24, 40, 0.12);
  transform: translateY(-1px);
}
.bd-task-meta-badges .dash-pill:active{
  transform: translateY(0);
}
.bd-task-meta-badges .dash-pill:focus-visible{
  outline: 2px solid #7fb2e4;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .bd-task-status-pill,
  .bd-task-prio-pill,
  .bd-task-sub-pill,
  .bd-task-btn-secondary{
    transition: none;
  }
  .bd-task-meta-badges .dash-pill:hover,
  .bd-task-btn-secondary:active{
    transform: none;
  }
}
.bd-task-quick-add{
  margin: 4px 0 2px;
  padding: 8px 10px;
  border: 1px solid #c8d8ee;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
}
.bd-task-quick-add-emphasis{
  border-color: #b6d1ef;
  background: linear-gradient(180deg, #f5faff 0%, #edf5ff 100%);
  box-shadow: inset 0 0 0 1px rgba(116, 161, 214, 0.12);
}
.bd-task-quick-add-title{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  color: #1d4e89;
  font-size: 15px;
  font-weight: 800;
}
.bd-task-quick-toast{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  margin-bottom: 8px;
  border-radius: 999px;
  border: 1px solid #b7e4c0;
  background: #edf9f1;
  color: #1f6f3d;
  font-size: 12px;
  font-weight: 700;
  opacity: 1;
  transition: opacity .22s ease, transform .22s ease;
}
.bd-task-quick-toast.is-hide{
  opacity: 0;
  transform: translateY(-3px);
}
.bd-task-quick-toast-mobile{
  display: none;
}
.bd-task-quick-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}
.bd-task-quick-compact-row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 380px);
  gap: 8px;
  align-items: stretch;
}
.bd-task-quick-title-wrap{
  min-width: 0;
}
.bd-task-quick-compact-row .input{
  font-size: 19px;
  font-weight: 700;
  min-width: 0;
}
.bd-task-quick-actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 0;
}
.bd-task-quick-actions .btn{
  width: 100%;
  justify-content: center;
}
.bd-task-quick-advanced{
  margin-top: 8px;
}
.bd-task-quick-advanced > summary{
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #33506f;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bd-task-quick-advanced[open] > summary{
  margin-bottom: 8px;
}
.bd-task-quick-priority{
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.bd-task-quick-priority .label{
  margin-bottom: 6px;
}
.bd-task-quick-priority .btn-group{
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}
.bd-task-quick-priority .btn-group .btn{
  flex: 1 1 0;
  min-width: 0;
}
.bd-task-quick-submit{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.bd-task-quick-hint{
  margin-top: 6px;
}
.bd-task-quick-meta{
  display: grid;
  gap: 2px;
}
.bd-task-quick-sticky{
  display: none;
}
.bd-task-quick-sticky-inner{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}
.bd-task-quick-sticky .input{
  min-width: 0;
}
.bd-task-quick-add-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.bd-task-row-tools{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bd-task-drag-handle{
  cursor: grab;
}
.bd-task-subtask-item{
  align-items: stretch;
  padding: 8px 10px;
}
.bd-task-subtask-item > .form-grid{
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.bd-task-subtask-grid{
  display: grid;
  gap: 8px;
  align-items: start;
}
.bd-task-subtask-meta-grid{
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(230px, 1.15fr) minmax(230px, 1.15fr);
  gap: 8px;
  align-items: start;
}
.bd-task-subtask-field{
  min-width: 0;
}
.bd-task-subtask-field .label{
  margin-bottom: 3px;
  font-size: 11px;
  line-height: 1.2;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.bd-task-subtask-title-input{
  font-size: 17px;
  font-weight: 700;
}
.bd-task-subtask-description-input{
  min-height: 40px;
  max-height: 40px;
  overflow: hidden;
  resize: vertical;
}
.bd-task-subtask-description-input:focus{
  min-height: 84px;
  max-height: none;
}
.bd-task-subtask-headline{
  align-items: center;
  margin-bottom: 2px;
}
.bd-task-subtask-remove-btn{
  min-width: 0;
}
.bd-task-subtask-item .grid2{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.bd-task-subtask-item .input,
.bd-task-subtask-item .select{
  width: 100%;
}
.bd-task-subtask-item.is-dragging{
  opacity: 0.7;
  border-color: #6ea8fe;
}
.bd-task-quick-status > div{
  flex: 1 1 auto;
  min-width: 0;
}
.bd-task-quick-status .select{
  min-width: 200px;
}
.bd-task-quick-status-badges{
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.bd-task-quick-status-badges .btn{
  min-width: 42px;
  justify-content: center;
}
.bd-task-subtask-item .btn-group{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.bd-task-subtask-item .btn-group .btn{
  flex: 0 0 auto;
  min-height: 32px;
  padding: 5px 9px;
  font-size: 14px;
  border-radius: 10px;
}
.bd-task-subtask-field.is-priority .btn-group .btn,
.bd-task-subtask-field.is-status .btn-group .btn{
  font-weight: 600;
}
.bd-task-subtask-field.is-priority .btn-group .btn i,
.bd-task-subtask-field.is-status .btn-group .btn i{
  margin-right: 4px;
}
.bd-task-items-page{
  gap: 12px;
}
.bd-task-items-nav{
  margin-bottom: 0;
}
.bd-task-items-head{
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #d7e4f1;
  background: linear-gradient(180deg, #fbfdff 0%, #f6faff 100%);
}
.bd-task-items-shell-head{
  margin-bottom: -2px;
}
.bd-task-items-head-main{
  min-width: 0;
}
.bd-task-items-tools{
  margin-left: auto;
}
.bd-task-items-editor{
  display: block;
  margin-top: 0;
}
.bd-task-editor-card{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
}
.bd-task-item-details{
  margin-top: 4px;
}
.bd-task-item-details > summary{
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: #38495f;
}
.bd-task-subtask-list{
  display: grid;
  gap: 6px;
  margin-top: 8px;
}
.bd-subtask-row{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  border: 1px solid #dbe5f3;
  border-left-width: 4px;
  border-radius: 10px;
  padding: 8px;
}
.bd-subtask-row:nth-child(odd){
  background: #fbfcff;
}
.bd-subtask-row:nth-child(even){
  background: #f4f8ff;
}
.bd-subtask-row.status-open{
  border-left-color: #6b7280;
}
.bd-subtask-row.status-doing{
  border-left-color: #c47b00;
}
.bd-subtask-row.status-done{
  border-left-color: #198754;
}
.bd-subtask-row.prio-1{
  box-shadow: inset 0 0 0 1px rgba(220, 53, 69, 0.25);
}
.bd-subtask-row.prio-2{
  box-shadow: inset 0 0 0 1px rgba(255, 193, 7, 0.18);
}
.bd-subtask-row.prio-3{
  box-shadow: inset 0 0 0 1px rgba(25, 135, 84, 0.12);
}
.bd-subtask-main{
  min-width: 0;
}
.bd-subtask-text{
  margin-top: 4px;
}
.bd-subtask-text > summary{
  cursor: pointer;
  font-size: 12px;
  color: #4a607c;
}
.bd-task-quick-status{
  justify-content: space-between;
  gap: 10px;
}
.bd-task-quick-status-panel{
  margin-top: 14px;
}
.bd-task-editor-head{
  margin-bottom: 4px;
}
.bd-task-editor-actions{
  margin-top: 8px;
}
.bd-task-editor-card > .dash-list{
  width: 100%;
}
.bd-task-edit-topbar{
  margin-bottom: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.bd-task-edit-summary{
  margin-bottom: 10px;
  padding: 12px 14px;
}
.bd-task-edit-summary .dash-item-title{
  font-size: 22px;
  line-height: 1.15;
}
.bd-task-edit-summary .dash-item-meta{
  line-height: 1.3;
}
.bd-task-edit-form{
  gap: 10px;
}
.bd-task-rec-card{
  display: block;
  margin-top: 8px;
  margin-bottom: 8px;
  padding: 12px 14px;
}
.bd-task-rec-toggle{
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr;
  gap: 8px 14px;
  align-items: center;
}
.bd-task-rec-fields{
  margin-top: 10px;
}
.bd-task-rec-intro{
  margin-bottom: 8px;
  color: #6b7280;
}
.bd-task-rec-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.bd-task-rec-until{
  margin-top: 10px;
}
.bd-task-template-check{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  margin-bottom: 2px;
}
.bd-task-edit-actions{
  margin-top: 8px;
  margin-bottom: 4px;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bd-task-delete-inline{
  display: inline-flex;
  margin: 0 0 10px 0;
}
.bd-task-edit-note{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 2px;
  color: #6b7280;
  font-size: 13px;
}
.bd-task-audit-panel{
  margin-top: 14px;
}
.bd-task-status-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bd-task-status-toggle.is-open:not(.btn-primary){
  border-color: #cfd4dc;
  background: #f5f7fa;
  color: #344054;
}
.bd-task-status-toggle.is-doing:not(.btn-primary){
  border-color: #f0d08a;
  background: #fff8e8;
  color: #8a4b00;
}
.bd-task-status-toggle.is-done:not(.btn-primary){
  border-color: #9fd7b6;
  background: #eaf8ef;
  color: #0f5132;
}

@media (min-width: 781px){
  .bd-task-nav{
    gap: 10px;
  }
  .bd-task-nav .btn{
    min-width: 126px;
  }
  .bd-task-card-head{
    gap: 18px;
  }
  .bd-task-card-main{
    flex: 1 1 auto;
  }
  .bd-task-card-actions{
    flex: 0 0 420px;
    align-self: flex-start;
    align-content: flex-start;
  }
  .bd-task-card-actions > form{
    grid-column: 1 / -1;
  }
  .bd-task-card-actions .btn{
    width: 100%;
    justify-content: flex-start;
  }
  .bd-task-card-actions > a{
    min-width: 0;
  }
  .bd-task-card-actions > a:last-child{
    grid-column: 2;
  }
  .bd-task-quick-add{
    padding: 14px;
  }
  .bd-task-quick-compact-row .input{
    min-height: 62px;
  }
  .bd-task-items-head{
    gap: 18px;
  }
  .bd-task-items-head-main{
    flex: 1 1 auto;
  }
  .bd-task-editor-card{
    gap: 10px;
  }
  .bd-task-subtask-item .btn-group{
    flex-wrap: nowrap;
  }
}

@media (max-width: 780px){
  .bd-task-quick-add-inline{
    display: none;
  }
  .bd-task-shell-head{
    align-items: stretch;
  }
  .bd-task-shell-head .btn{
    justify-content: center;
  }
  .bd-task-card-head{
    flex-direction: column;
    gap: 12px;
  }
  .bd-task-items-head{
    flex-direction: column;
  }
  .bd-task-items-tools{
    margin-left: 0;
    width: 100%;
  }
  .bd-task-card-actions{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    align-items: stretch;
    padding: 8px;
  }
  .bd-task-card-actions > form,
  .bd-task-card-actions > a{
    width: 100%;
  }
  .bd-task-card-actions .btn{
    width: 100%;
    justify-content: flex-start;
  }
  .bd-task-block-complete{
    grid-column: 1 / -1;
    width: 100%;
  }
  .bd-task-btn-icon{
    min-width: 0;
  }
  .bd-task-btn-secondary{
    flex: 1 1 auto;
    justify-content: flex-start;
  }
  .bd-task-btn-edit{
    min-height: 42px;
  }
  .bd-task-quick-grid{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .bd-task-quick-compact-row{
    grid-template-columns: 1fr;
  }
  .bd-task-quick-actions{
    min-width: 0;
  }
  .bd-task-quick-compact-row .btn{
    width: 100%;
    justify-content: center;
  }
  .bd-task-quick-priority .btn-group{
    flex-wrap: wrap;
  }
  .bd-task-quick-priority .btn-group .btn{
    flex: 1 1 calc(33.333% - 4px);
  }
  .bd-task-quick-compact-row .input{
    font-size: 18px;
  }
  .bd-task-quick-submit{
    justify-content: flex-start;
  }
  .bd-task-block-complete .button-row{
    justify-content: flex-start;
    width: 100%;
  }
  .bd-task-quick-sticky{
    display: block;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(78px + env(safe-area-inset-bottom));
    z-index: 40;
    margin: 0;
    padding: 8px;
    border: 1px solid #c8d8ee;
    border-radius: 12px;
    background: rgba(248, 251, 255, 0.97);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(2px);
  }
  .bd-task-page{
    padding-bottom: 170px;
  }
  .bd-task-quick-toast-mobile{
    display: inline-flex;
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }
  .bd-task-nav .bd-task-nav-label{
    display: inline;
  }
  .bd-task-nav .btn{
    min-width: 0;
    min-height: 42px;
    justify-content: flex-start;
    padding-left: 10px;
    padding-right: 10px;
  }
  .bd-task-subtask-grid{
    grid-template-columns: 1fr;
  }
  .bd-task-subtask-meta-grid{
    grid-template-columns: 1fr;
  }
  .bd-task-subtask-item .grid2{
    grid-template-columns: 1fr;
  }
  .bd-task-quick-status .select{
    min-width: 140px;
  }
  .bd-task-quick-status{
    flex-direction: column;
    align-items: stretch;
  }
  .bd-task-quick-status-badges{
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .bd-task-quick-status-badges .btn{
    min-width: 36px;
    width: 100%;
    justify-content: flex-start;
    padding-left: 12px;
    padding-right: 12px;
  }
  .page > .card + .card{
    margin-top: 14px;
  }
}

@media (max-width: 780px){
  .bd-task-items-nav{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .bd-task-items-nav .btn{
    width: 100%;
    justify-content: center;
  }
  .bd-task-quick-add-row{
    grid-template-columns: 1fr;
  }
  .bd-task-quick-add-row .btn{
    width: 100%;
    justify-content: center;
  }
  .bd-task-rec-toggle{
    grid-template-columns: 1fr;
  }
  .bd-task-rec-grid{
    grid-template-columns: 1fr;
  }
}