/* v48 - Projecten gebruikt dezelfde layouttaal als Tickets/Taken */

/* Pagina exact hetzelfde ritme als de andere hoofdmodules */
.v31-projects-page,
.projects-page{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:20px 32px 34px!important;
  box-sizing:border-box!important;
}

/* Header gelijk aan Tickets/Taken */
.v31-projects-page > .top,
.v31-projects-top{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:16px!important;
  margin:0 0 22px!important;
}

.v31-projects-page .title,
.v31-projects-top h1{
  font-size:36px!important;
  line-height:1.05!important;
  font-weight:780!important;
  letter-spacing:-.018em!important;
  color:#07345b!important;
  margin:0!important;
}

.v31-projects-page .sub,
.v31-projects-top p{
  margin:6px 0 0!important;
  font-size:14px!important;
  line-height:1.35!important;
  font-weight:600!important;
  color:#61758d!important;
}

/* Headerknoppen gelijk aan andere knoppen */
.v31-projects-actions{
  display:flex!important;
  gap:10px!important;
  margin-left:auto!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
}

.v31-projects-actions .v31-add-btn,
.v31-hidden-projects-btn{
  height:40px!important;
  min-height:40px!important;
  padding:0 18px!important;
  border-radius:10px!important;
  font-size:13px!important;
  font-weight:750!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}

.v31-projects-actions .v31-add-btn{
  background:#1f5f9f!important;
  border:1px solid #1f5f9f!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(31,95,159,.18)!important;
}

.v31-projects-actions .v31-add-btn::after{
  content:none!important;
}

/* Project filterkaart hetzelfde als ticket/task filterkaart */
.v31-projects-toolbar,
.v36-project-filter-card{
  width:100%!important;
  max-width:none!important;
  margin:0 0 26px!important;
  padding:16px 18px!important;
  background:#fff!important;
  border:1px solid #cfe0f1!important;
  border-radius:14px!important;
  box-shadow:0 10px 24px rgba(15,47,77,.055)!important;
  box-sizing:border-box!important;
}

/* Tabs minder als apart project-menu, meer als subtiele filterrij */
.v31-project-tabs{
  display:flex!important;
  gap:24px!important;
  align-items:center!important;
  padding:0 0 10px!important;
  margin:0 0 14px!important;
  border-bottom:1px solid #dce9f6!important;
}

.v31-project-tabs button{
  position:relative!important;
  height:24px!important;
  min-height:24px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#61758d!important;
  font-size:12px!important;
  font-weight:700!important;
  line-height:1!important;
}

.v31-project-tabs button::after{
  content:none!important;
  display:none!important;
}

.v31-project-tabs button.active{
  color:#1f5f9f!important;
}

.v31-project-tabs button.active::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-10px!important;
  height:2px!important;
  border-radius:999px!important;
  background:#1f5f9f!important;
}

/* Zoekregel zoals andere filterregels */
.v31-project-search{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:12px!important;
  align-items:end!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.v31-project-search label{
  display:block!important;
  margin:0 0 6px!important;
  font-size:12px!important;
  font-weight:750!important;
  color:#082f52!important;
}

.v31-project-search input{
  height:42px!important;
  min-height:42px!important;
  padding:0 14px!important;
  border:1px solid #bfd3e9!important;
  border-radius:10px!important;
  font-size:14px!important;
  font-weight:650!important;
}

.v31-project-search button,
.v36-project-filter-card button[type="submit"]{
  height:42px!important;
  min-height:42px!important;
  padding:0 18px!important;
  border-radius:10px!important;
  background:#1f5f9f!important;
  border:1px solid #1f5f9f!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:750!important;
  box-shadow:0 10px 22px rgba(31,95,159,.18)!important;
}

/* Secundaire projectknoppen zoals tickets/taken */
.v31-project-tools,
.v36-project-filter-card .v31-project-tools{
  display:flex!important;
  gap:8px!important;
  margin-top:12px!important;
}

.v31-project-tools button,
.v36-project-filter-card button:not([type="submit"]),
.v36-project-filter-card .btn{
  height:38px!important;
  min-height:38px!important;
  padding:0 14px!important;
  border-radius:10px!important;
  border:1px solid #c6d8eb!important;
  background:#fff!important;
  color:#082f52!important;
  font-size:13px!important;
  font-weight:750!important;
}

/* Resultaatkaart zelfde gevoel als Tickets/Taken */
.v31-project-list-card{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  background:#fff!important;
  border:1px solid #cfe0f1!important;
  border-radius:14px!important;
  box-shadow:0 10px 24px rgba(15,47,77,.055)!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}

/* Projecttabel compacter en gelijkmatiger */
.v31-project-grid{
  display:grid!important;
  grid-template-columns:
    minmax(360px,2fr)
    minmax(180px,.9fr)
    minmax(150px,.7fr)
    minmax(110px,.55fr)
    86px!important;
  column-gap:14px!important;
  align-items:center!important;
}

.v31-project-header-row{
  min-height:42px!important;
  padding:10px 16px!important;
  background:#f8fbff!important;
  border-bottom:1px solid #dce9f6!important;
  color:#082f52!important;
  font-size:12px!important;
  font-weight:780!important;
}

.v31-group-header{
  min-height:38px!important;
  padding:9px 16px!important;
  background:#fbfdff!important;
  border-top:1px solid #dce9f6!important;
  border-bottom:1px solid #dce9f6!important;
  color:#082f52!important;
  font-size:14px!important;
  font-weight:760!important;
}

.v31-project-row{
  min-height:52px!important;
  padding:8px 16px!important;
  border-top:1px solid #e5eef8!important;
  background:#fff!important;
}

.v31-project-main{
  display:grid!important;
  grid-template-columns:24px minmax(0,1fr)!important;
  column-gap:10px!important;
  align-items:center!important;
}

.v31-project-star{
  display:none!important;
}

.v31-project-expand{
  width:22px!important;
  height:22px!important;
  font-size:11px!important;
}

.v31-project-title{
  font-size:13px!important;
  font-weight:760!important;
  line-height:1.2!important;
  color:#082f52!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

.v31-project-sub,
.v31-project-company,
.v31-project-date{
  font-size:12px!important;
  font-weight:620!important;
  line-height:1.2!important;
  color:#61758d!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

.v31-project-badge{
  min-width:74px!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  font-size:10px!important;
  font-weight:760!important;
}

.v31-project-more{
  min-width:68px!important;
  height:30px!important;
  border:1px solid #cbd9ea!important;
  background:#fff!important;
  border-radius:8px!important;
  font-size:0!important;
}

.v31-project-more::after{
  content:'Openen'!important;
  font-size:11px!important;
  font-weight:750!important;
  color:#082f52!important;
}

/* Uitgeklapte taken als onderdeel van de rij, niet als aparte stijl */
.v31-project-tasks{
  padding:10px 16px 12px 46px!important;
  background:#f8fbff!important;
  border-top:1px solid #dce9f6!important;
}

.v31-project-tasks h4{
  margin:0 0 8px!important;
  font-size:13px!important;
  font-weight:760!important;
  color:#082f52!important;
}

.v31-task-list{
  display:grid!important;
  gap:6px!important;
}

.v31-task-item{
  min-height:34px!important;
  padding:7px 10px!important;
  border-radius:10px!important;
  border:1px solid #dce9f6!important;
  background:#fff!important;
  font-size:12px!important;
}

.v31-task-title{
  font-size:13px!important;
  font-weight:760!important;
}

.v31-task-meta{
  font-size:12px!important;
  color:#61758d!important;
}

.v31-task-actions{
  margin-top:8px!important;
}

.v31-task-actions a{
  min-height:32px!important;
  padding:0 11px!important;
  border-radius:9px!important;
  font-size:12px!important;
}

/* Mobiel */
@media(max-width:900px){
  .v31-projects-page,
  .projects-page{
    padding:14px 12px 28px!important;
  }

  .v31-projects-page > .top,
  .v31-projects-top{
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
    margin-bottom:18px!important;
  }

  .v31-projects-page .title,
  .v31-projects-top h1{
    font-size:30px!important;
  }

  .v31-projects-page .sub,
  .v31-projects-top p{
    font-size:13px!important;
  }

  .v31-projects-actions{
    width:100%!important;
  }

  .v31-projects-actions .v31-add-btn,
  .v31-hidden-projects-btn{
    width:100%!important;
  }

  .v31-project-tabs{
    overflow-x:auto!important;
    gap:22px!important;
  }

  .v31-project-search{
    grid-template-columns:1fr!important;
  }

  .v31-project-list-card{
    overflow-x:auto!important;
  }

  .v31-project-grid{
    min-width:820px!important;
  }
}