.task-more{display:none}
.updatebar{
 position:sticky;top:64px;z-index:21;
 display:flex;align-items:center;justify-content:center;
 gap:8px;padding:8px 12px;
 background:#27384c;color:#fff
}
.updatebar button{
 padding:5px 12px;background:#fff;color:#111;border:0
}

@media(max-width:650px){
 html,body,.shell{
  background:#000!important;color:#edf1f9
 }
 .topbar{
  height:50px;min-height:50px;padding:5px 10px
 }
 .brand small{display:none}
 .brand-logo.small{width:30px;height:30px}
 .header-actions{gap:4px}
 .iconbtn{padding:5px 9px}
 .status{
  max-width:130px;font-size:11px;padding:5px 7px
 }
 .updatebar{top:50px;font-size:12px}
 .page{padding:9px 0 65px}

 #tasksPage .pageheading{
  padding:0 12px;margin:0 0 8px;gap:8px
 }
 #tasksPage .pageheading h1{font-size:18px}
 #tasksPage .pageheading p,
 #tasksPage .toolbar{display:none!important}

 #addTaskBtn{
  width:42px;height:42px;padding:0;
  display:grid;place-items:center;
  border-radius:50%;
  font-size:0!important;line-height:1
 }
 #addTaskBtn::after{
  content:'+';font-size:30px;
  font-weight:400;line-height:1
 }

 .tasks-list{
  display:block;background:#101318
 }
 .task-card,
 .task-card.priority1,
 .task-card.priority2{
  min-height:0;margin:0;
  padding:0 8px 0 10px;
  background:#101318;
  box-shadow:none;border-radius:0;
  border-top:0;border-right:0;
  border-bottom:1px solid #2b313a;
  border-left:3px solid transparent
 }
 .task-card.priority1{border-left-color:#dca44c}
 .task-card.priority2{border-left-color:#e97581}
 .task-card.done{opacity:.65}

 .task-top{
  display:flex;align-items:center;
  min-height:44px;gap:10px
 }
 .task-check{
  width:21px;height:21px;
  margin:0;flex:none
 }
 .task-content{
  min-height:44px;padding:6px 0;
  display:flex;align-items:center;
  flex:1;min-width:0;
  touch-action:manipulation
 }
 .task-content strong{
  font-size:15px;font-weight:500;
  line-height:1.28;color:#f2f4f8;
  overflow-wrap:anywhere
 }
 .task-card.done .task-content strong{
  text-decoration:line-through;
  text-decoration-thickness:1.5px;
  color:#9ca4b2
 }
 .task-content p,.task-foot{display:none}

 .task-more{
  display:grid;place-items:center;
  align-self:stretch;
  min-width:36px;flex:none;
  padding:0 6px;
  border:0;border-radius:0;
  background:transparent;
  color:#b4becb;font-size:23px
 }
 .task-card.pending-sync .task-foot{
  display:flex;margin:0 0 4px 31px;
  font-size:10px
 }
 .task-card.pending-sync .task-foot .tag{
  display:none
 }
 .empty{margin:55px 12px}
 .notice{margin:10px 12px}
 #profilePage,#usersPage{padding:0 12px}
 .dialog{
  background:#162137;color:#edf1f9
 }
}

/* V5 - Centralizar botao de adicionar */
@media(max-width:650px) {
    #addTaskBtn {
        position:relative!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        font-size:0!important;
        line-height:0!important;
    }
    #addTaskBtn::after {
        position:absolute!important;
        inset:0;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        margin:0!important;
        line-height:1!important;
        transform:none!important;
    }
}

/* V6 - Sincronizacao somente no indicador superior */
@media (max-width:650px) {
    .task-card .task-foot,
    .task-card.pending-sync .task-foot {
        display: none !important;
    }
}

/* V7 - Ordenação manual */
.drag-handle{
  display:grid;
  place-items:center;
  touch-action:none;
  user-select:none;
  border:0;
  background:transparent;
  color:#8f9bab;
  font-size:20px;
  min-width:32px;
  cursor:grab;
  padding:4px;
  align-self:stretch;
}
.drag-handle:active{cursor:grabbing}
.task-card.dragging{
  opacity:.8;
  outline:1px solid #4b7eea;
  box-shadow:0 5px 15px #0007;
}
@media(max-width:650px){
  .task-card .task-foot,
  .task-card.pending-sync .task-foot{
    display:none!important;
  }
  .drag-handle{
    min-width:30px;
    color:#9da5b3;
  }
  .task-card,
  .task-card.done{
    border-left-color:transparent!important;
  }
}


/* =====================================
   TAREFAS V8 - MODO EDICAO
   ===================================== */

.mobile-edit-btn,
.task-remove,
.task-done-mark {
    display:none;
}

@media(max-width:650px) {

    #tasksPage .pageheading > div:first-child {
        margin-right:auto;
    }

    #mobileEditBtn {
        display:grid;
        place-items:center;
        width:42px;
        height:42px;
        flex:0 0 42px;
        padding:0;
        border:0;
        border-radius:9px;
        color:#eef2f7;
        background:transparent;
        font-size:27px;
        line-height:1;
    }

    #mobileEditBtn[aria-pressed="true"] {
        color:#9ec0ff;
        background:#243652;
    }

    /* Modo normal */

    #tasksPage .task-card .task-check,
    #tasksPage .task-card .drag-handle,
    #tasksPage .task-card .task-more {
        display:none!important;
    }

    #tasksPage .task-card.done .task-done-mark {
        display:grid;
        place-items:center;
        flex:0 0 30px;
        color:#aab3be;
        font-size:23px;
        font-weight:700;
    }

    /* Modo edicao */

    #tasksPage.mobile-editing .task-card .drag-handle {
        display:grid!important;
        order:-1;
        flex:0 0 32px;
        align-self:stretch;
        place-items:center;
        color:#c6ccd5;
        font-size:23px;
        touch-action:none;
        cursor:grab;
    }

    #tasksPage.mobile-editing .task-card .task-remove {
        display:grid!important;
        place-items:center;
        flex:0 0 36px;
        align-self:stretch;
        padding:0;
        border:0;
        background:transparent;
        color:#ff3545;
        font-size:32px;
        line-height:1;
    }

    #tasksPage.mobile-editing .task-card .task-done-mark {
        display:none!important;
    }

    #tasksPage.mobile-editing .task-card.done {
        opacity:1;
    }

    #tasksPage.mobile-editing .task-card.done strong {
        color:#9099a5;
    }
}

/* V9 - Botao adicionar apenas no modo edicao */

@media(max-width:650px){

  #tasksPage #addTaskBtn{
    display:none!important;
  }

  #tasksPage.mobile-editing #addTaskBtn{
    display:grid!important;
    place-items:center!important;
  }

}

/* TAREFAS V10 - STATUS CLICAVEL */

#syncStatus {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:999px;
    padding:5px 9px;
    font:inherit;
    font-size:.78rem;
    line-height:1.3;
    white-space:nowrap;
    cursor:pointer;
}

#syncStatus:focus-visible {
    outline:2px solid #8bb6ff;
    outline-offset:2px;
}

/* TAREFA ACOMPANHANDO O DEDO */

.task-drag-preview {
    position:fixed!important;
    z-index:99999;
    box-sizing:border-box;

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

    min-height:44px;
    padding:7px 12px;

    background:#22314a;
    color:#f7faff;

    border:1px solid #78a7ff;
    border-radius:8px;

    box-shadow:0 10px 24px #000a;

    opacity:.97;
    pointer-events:none;
    overflow:hidden;
    will-change:transform;
}

.task-drag-preview-grip {
    flex:none;
    color:#b9d2ff;
    font-size:23px;
}

.task-drag-preview strong {
    font-size:15px;
    font-weight:500;
    line-height:1.3;
    overflow-wrap:anywhere;
    max-height:4em;
    overflow:hidden;
}

/* POSICAO TEMPORARIA */

.task-card.task-drag-placeholder {
    opacity:.22!important;
    box-shadow:none!important;
}


/* ======================================
   TAREFAS V12 - MENU MOBILE
   ====================================== */

@media (max-width:650px) {

    /* Esconder perfil */
    #navMenu [data-page="profile"] {
        display:none!important;
    }

    /* Esconder gerenciamento de usuarios */
    #navMenu [data-page="users"] {
        display:none!important;
    }

    /* Impedir exibicao das paginas */
    #profilePage,
    #usersPage {
        display:none!important;
    }

}