/* Ticketflow Global Polish v47
   Doel: Tickets, Projecten, Taken, Planning, Analyse, Tijd en Beheer visueel gelijker maken.
*/

/* ===== Basis schaal ===== */
:root{
  --tf-bg:#eef3f8;
  --tf-card:#ffffff;
  --tf-blue:#1f5f9f;
  --tf-blue-dark:#07345b;
  --tf-text:#082f52;
  --tf-muted:#61758d;
  --tf-border:#cfe0f1;
  --tf-border-soft:#dce9f6;
  --tf-radius:14px;
  --tf-shadow:0 10px 24px rgba(15,47,77,.055);

  --tf-page-x:32px;
  --tf-page-top:20px;
  --tf-title:36px;
  --tf-subtitle:14px;

  --tf-card-pad-y:16px;
  --tf-card-pad-x:18px;

  --tf-control-h:42px;
  --tf-control-radius:10px;
  --tf-font:14px;
  --tf-font-small:12px;
}

html,body{
  background:var(--tf-bg)!important;
  color:var(--tf-text)!important;
  font-size:var(--tf-font)!important;
}

/* ===== Globale paginabreedte / positie ===== */
.page-shell,
.v31-projects-page,
.projects-page,
.tasks-page,
.planning-page,
.analytics-page,
.time-report-page,
.admin-page{
  max-width:none!important;
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  padding:var(--tf-page-top) var(--tf-page-x) 34px!important;
  box-sizing:border-box!important;
}

/* Veel pagina's gebruiken directe containers zonder page-shell */
main,
.main,
.content,
.container,
.container-fluid{
  box-sizing:border-box!important;
}

/* ===== Pagina headers ===== */
.top,
.page-header,
.v31-projects-page > .top,
.v31-projects-top{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:16px!important;
  margin:0 0 22px!important;
}

.top .title,
.page-title,
h1,
.v31-projects-page .title,
.v31-projects-top h1{
  font-size:var(--tf-title)!important;
  line-height:1.05!important;
  font-weight:780!important;
  letter-spacing:-.018em!important;
  color:var(--tf-blue-dark)!important;
  margin:0!important;
}

.top .sub,
.page-subtitle,
.subtitle,
.lead,
.v31-projects-page .sub,
.v31-projects-top p{
  margin:6px 0 0!important;
  font-size:var(--tf-subtitle)!important;
  line-height:1.35!important;
  font-weight:600!important;
  color:var(--tf-muted)!important;
}

/* ===== Kaarten ===== */
.filter-card,
.bulk-card,
.ticket-list-card,
.task-list-card,
.v31-projects-toolbar,
.v36-project-filter-card,
.v31-project-list-card,
.v31-project-create,
.card,
.panel,
.admin-card,
.dashboard-card,
.time-card,
.analytics-card,
.planning-card,
.planning-filters,
.planning-overview,
form.card{
  background:var(--tf-card)!important;
  border:1px solid var(--tf-border)!important;
  border-radius:var(--tf-radius)!important;
  box-shadow:var(--tf-shadow)!important;
  box-sizing:border-box!important;
}

/* Filterkaarten overal zelfde ritme */
.filter-card,
.task-filter-card,
.v31-projects-toolbar,
.v36-project-filter-card,
.planning-filters,
.analytics-filter,
.time-filter,
.admin-search-card{
  padding:var(--tf-card-pad-y) var(--tf-card-pad-x)!important;
  margin-bottom:26px!important;
}

/* Grote tussenruimte temperen */
.ticket-list-card,
.task-list-card,
.v31-project-list-card,
.planning-overview,
.analytics-card,
.time-card{
  margin-top:0!important;
}

/* ===== Formulieren ===== */
label,
.form-label,
.v31-project-search label,
.filter-card label,
.task-filter-card label,
.planning-filters label,
.analytics-filter label,
.time-filter label{
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:750!important;
  color:var(--tf-text)!important;
  margin-bottom:6px!important;
}

input,
select,
textarea,
.form-control,
.form-select{
  min-height:var(--tf-control-h)!important;
  height:auto!important;
  border:1px solid #bfd3e9!important;
  border-radius:var(--tf-control-radius)!important;
  font-size:14px!important;
  font-weight:650!important;
  color:var(--tf-text)!important;
  background:#fff!important;
  box-shadow:none!important;
}

input::placeholder,
textarea::placeholder{
  color:#66788e!important;
  opacity:.95!important;
  font-weight:650!important;
}

/* ===== Knoppen ===== */
button,
.btn,
a.btn,
input[type="submit"]{
  min-height:38px!important;
  border-radius:var(--tf-control-radius)!important;
  font-size:13px!important;
  line-height:1.1!important;
  font-weight:750!important;
  box-shadow:none!important;
}

.btn-primary,
button[type="submit"],
input[type="submit"],
.top .btn-primary,
.top a.btn-primary,
.v31-projects-actions .v31-add-btn{
  min-height:40px!important;
  height:40px!important;
  padding:0 18px!important;
  background:var(--tf-blue)!important;
  border:1px solid var(--tf-blue)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(31,95,159,.18)!important;
}

.btn-secondary,
.btn-outline,
.btn-light,
a.btn:not(.btn-primary),
button:not([type="submit"]){
  border:1px solid #c6d8eb!important;
  background:#fff!important;
  color:var(--tf-text)!important;
}

/* Header actieknoppen rechts */
.top .btn-primary,
.top a.btn-primary,
.v31-projects-actions .v31-add-btn,
.v31-hidden-projects-btn{
  min-width:132px!important;
  max-width:none!important;
  white-space:nowrap!important;
}

/* ===== Tabellen/lijsten ===== */
table{
  font-size:13px!important;
}

th,
.table th,
.ticket-list-card th,
.task-list-card th,
.v31-project-header-row,
.v31-project-header-row div{
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:780!important;
  color:var(--tf-text)!important;
  letter-spacing:.01em!important;
}

td,
.table td{
  font-size:13px!important;
  vertical-align:middle!important;
}

.ticket-list-card,
.task-list-card,
.v31-project-list-card{
  overflow:hidden!important;
}

/* Groepsregels */
.company-group-header,
.v31-group-header,
.task-company-row,
.group-header{
  min-height:38px!important;
  padding:9px 16px!important;
  background:#f8fbff!important;
  color:var(--tf-text)!important;
  font-size:14px!important;
  font-weight:760!important;
  border-top:1px solid var(--tf-border-soft)!important;
  border-bottom:1px solid var(--tf-border-soft)!important;
}

/* Status badges */
.badge,
.status-badge,
.v31-project-badge{
  font-size:10px!important;
  font-weight:760!important;
  line-height:1!important;
  border-radius:999px!important;
  padding:6px 10px!important;
}

/* ===== Tickets specifieke polish ===== */
.ticket-list-card .bulk-card,
.bulk-card{
  padding:14px 18px!important;
}

.ticket-list-card tr,
.ticket-row{
  min-height:52px!important;
}

.ticket-list-card .company-group-header{
  font-size:14px!important;
}

/* ===== Projecten specifieke polish ===== */
.v31-projects-page{
  padding-top:22px!important;
  padding-left:32px!important;
  padding-right:32px!important;
}

.v31-projects-page > .top,
.v31-projects-top{
  margin-bottom:22px!important;
}

.v31-projects-actions{
  margin-left:auto!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:flex-start!important;
  gap:10px!important;
}

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

/* Project filterkaart */
.v31-projects-toolbar,
.v36-project-filter-card{
  padding:14px 18px 16px!important;
  margin-bottom:26px!important;
}

/* Project tabs: subtiel en klein */
.v31-project-tabs{
  display:flex!important;
  gap:28px!important;
  padding:0 0 8px!important;
  margin:0 0 12px!important;
  border-bottom:1px solid var(--tf-border-soft)!important;
}

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

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

.v31-project-tabs button.active{
  color:var(--tf-blue)!important;
  border:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
}

.v31-project-tabs button.active::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:-9px!important;
  height:2px!important;
  border-radius:999px!important;
  background:var(--tf-blue)!important;
}

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

.v31-project-search input{
  height:40px!important;
  min-height:40px!important;
  font-size:13px!important;
}

.v31-project-search button,
.v36-project-filter-card button[type="submit"]{
  height:40px!important;
  min-height:40px!important;
  padding:0 16px!important;
  font-size:13px!important;
}

/* Project tool buttons */
.v31-project-tools,
.v36-project-filter-card .v31-project-tools{
  margin-top:10px!important;
  gap:8px!important;
}

.v31-project-tools button,
.v36-project-filter-card .btn,
.v36-project-filter-card button:not([type="submit"]){
  height:36px!important;
  min-height:36px!important;
  padding:0 14px!important;
  font-size:12px!important;
}

/* Projectlijst */
.v31-project-grid{
  display:grid!important;
  grid-template-columns:
    minmax(420px,2fr)
    minmax(180px,.8fr)
    minmax(160px,.7fr)
    minmax(110px,.5fr)
    88px!important;
  column-gap:14px!important;
  align-items:center!important;
}

.v31-project-header-row{
  min-height:38px!important;
  padding:8px 16px!important;
  background:#f8fbff!important;
}

.v31-project-row{
  min-height:50px!important;
  padding:7px 16px!important;
  border-top:1px solid #e5eef8!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,
.v31-project-sub,
.v31-project-company,
.v31-project-date{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

.v31-project-title{
  font-size:13px!important;
  font-weight:760!important;
  line-height:1.2!important;
}

.v31-project-sub,
.v31-project-company,
.v31-project-date{
  font-size:12px!important;
  font-weight:620!important;
  line-height:1.2!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:var(--tf-text)!important;
}

/* Project takenblok */
.v31-project-tasks{
  padding:10px 16px 12px 46px!important;
  background:#f8fbff!important;
  border-top:1px solid var(--tf-border-soft)!important;
}

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

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

.v31-task-item{
  min-height:34px!important;
  padding:7px 10px!important;
  border-radius:10px!important;
  font-size:12px!important;
}

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

.v31-task-meta{
  font-size:12px!important;
}

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

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

/* ===== Taken specifieke polish ===== */
.tasks-page .filter-card,
.task-filter-card{
  padding:16px 18px!important;
}

.task-list-card h2,
.card h2,
.panel h2{
  font-size:18px!important;
  line-height:1.2!important;
  font-weight:780!important;
}

.task-list-card .task-row{
  min-height:54px!important;
}

/* ===== Planning polish ===== */
.planning-page .card,
.planning-filters,
.planning-overview{
  padding:16px 18px!important;
}

.planning-page h2,
.planning-overview h2{
  font-size:20px!important;
  font-weight:780!important;
}

.planning-page .btn,
.planning-page button{
  min-height:36px!important;
  font-size:12px!important;
}

.planning-page .calendar-card,
.planning-page .day-card{
  border-radius:12px!important;
}

/* ===== Analyse / Tijd / Beheer polish ===== */
.analytics-page .filter-card,
.time-report-page .filter-card,
.admin-page .filter-card,
.admin-search-card{
  padding:16px 18px!important;
}

.analytics-page h2,
.time-report-page h2,
.admin-page h2,
.admin-card h2{
  font-size:18px!important;
  font-weight:780!important;
}

.analytics-page .metric,
.time-report-page .metric{
  font-size:28px!important;
  font-weight:760!important;
}

.admin-card{
  padding:18px!important;
}

.admin-card h3,
.admin-card .title{
  font-size:16px!important;
  font-weight:780!important;
}

.admin-card p,
.admin-card .sub{
  font-size:14px!important;
  color:var(--tf-muted)!important;
}

/* ===== Footer / bottom spacing ===== */
footer,
.footer{
  font-size:12px!important;
}

/* ===== Mobiel ===== */
@media(max-width:900px){
  :root{
    --tf-page-x:12px;
    --tf-page-top:14px;
    --tf-title:30px;
    --tf-subtitle:13px;
    --tf-control-h:40px;
  }

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

  .top .btn-primary,
  .top a.btn-primary,
  .v31-projects-actions .v31-add-btn,
  .v31-hidden-projects-btn{
    width:100%!important;
    min-width:0!important;
  }

  .filter-card,
  .task-filter-card,
  .v31-projects-toolbar,
  .v36-project-filter-card,
  .planning-filters,
  .analytics-filter,
  .time-filter,
  .admin-search-card{
    padding:14px!important;
  }

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

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

  .v31-project-list-card,
  .ticket-list-card,
  .task-list-card,
  .planning-overview{
    overflow-x:auto!important;
  }

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