/* TicketFlow v36 visibility cleanbuild
   One final layer that makes Tickets / Projecten / Taken predictable.
   Principle: do not hide core content with CSS/JS; only collapse where user explicitly chooses it. */

:root{
  --v36-blue:#1f5f9f;
  --v36-blue-dark:#174e83;
  --v36-bg:#eef4f8;
  --v36-card:#ffffff;
  --v36-border:#d5e1ef;
  --v36-text:#0f2f4d;
  --v36-muted:#65788f;
}

/* Global hardening against width bugs */
html,body{
  max-width:100%;
  overflow-x:hidden;
}
body{
  background:var(--v36-bg)!important;
}
.site-shell,.site-header,.header-bar,.page-shell,main,.footer-bar{
  max-width:100%;
  box-sizing:border-box;
}

/* Header: predictable desktop + mobile */
.tf-v30-header .header-inner{
  max-width:none!important;
  width:100%!important;
  padding-left:28px!important;
  padding-right:28px!important;
}
.tf-v30-header .brand-inline{
  min-width:220px!important;
}
.tf-v30-topnav>a{
  white-space:nowrap!important;
}

/* Overview pages: no save bar ever */
body[data-endpoint="tickets"] .tf-global-save-host,
body[data-endpoint="tickets"] .tf-global-savebar,
body[data-endpoint="tasks"] .tf-global-save-host,
body[data-endpoint="tasks"] .tf-global-savebar,
body[data-endpoint="projects"] .tf-global-save-host,
body[data-endpoint="projects"] .tf-global-savebar,
body[data-endpoint="my_tickets"] .tf-global-save-host,
body[data-endpoint="my_tickets"] .tf-global-savebar,
body[data-endpoint="calendar_view"] .tf-global-save-host,
body[data-endpoint="calendar_view"] .tf-global-savebar,
body[data-endpoint="analytics"] .tf-global-save-host,
body[data-endpoint="analytics"] .tf-global-savebar,
body[data-endpoint="time_report"] .tf-global-save-host,
body[data-endpoint="time_report"] .tf-global-savebar,
body:has(.v31-tickets-page) .tf-global-save-host,
body:has(.v31-tickets-page) .tf-global-savebar,
body:has(.v31-tasks-page) .tf-global-save-host,
body:has(.v31-tasks-page) .tf-global-savebar,
body:has(.v31-projects-page) .tf-global-save-host,
body:has(.v31-projects-page) .tf-global-savebar{
  display:none!important;
}

/* Overview cards: consistent feel */
.v31-tickets-page,
.v31-tasks-page,
.v31-projects-page{
  display:flex!important;
  flex-direction:column!important;
  gap:16px!important;
  width:100%!important;
  max-width:100%!important;
}
.v31-projects-top,
.v31-tickets-top,
.v31-tasks-top{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:16px!important;
}
.v31-projects-top h1,
.v31-tickets-top h1,
.v31-tasks-top h1{
  color:var(--v36-text)!important;
  font-size:42px!important;
  line-height:1.05!important;
  font-weight:900!important;
  margin:0!important;
}
.v31-projects-top p,
.v31-tickets-top p,
.v31-tasks-top p{
  color:var(--v36-muted)!important;
  font-weight:800!important;
  font-size:16px!important;
  margin:8px 0 0!important;
}

/* Projecten exactly closer to tickets */
.v31-projects-actions{
  display:flex!important;
  gap:10px!important;
  align-items:center!important;
}
.v31-projects-actions .v31-icon-btn{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  border-radius:999px!important;
}
.v31-projects-actions .v31-add-btn{
  width:auto!important;
  min-width:146px!important;
  height:44px!important;
  padding:0 18px!important;
  border-radius:12px!important;
  font-size:0!important;
  background:var(--v36-blue)!important;
  border-color:var(--v36-blue)!important;
  color:#fff!important;
}
.v31-projects-actions .v31-add-btn::after{
  content:"Nieuw project";
  font-size:14px!important;
  font-weight:900!important;
}
.v31-projects-toolbar,
.v31-project-search,
.v31-project-list-card,
.v31-ticket-filter-card,
.v31-task-filter-card,
.v31-ticket-list-card,
.v31-task-list-card{
  background:var(--v36-card)!important;
  border:1px solid var(--v36-border)!important;
  border-radius:18px!important;
  box-shadow:0 8px 24px rgba(15,47,77,.06)!important;
}
.v31-projects-toolbar{
  min-height:62px!important;
  padding:0 18px!important;
}
.v31-project-tabs{
  min-height:62px!important;
  display:flex!important;
  align-items:center!important;
  gap:24px!important;
}
.v31-project-tabs button{
  height:62px!important;
  border:0!important;
  background:transparent!important;
  color:var(--v36-muted)!important;
  font-size:15px!important;
  font-weight:900!important;
  padding:0!important;
}
.v31-project-tabs button.active{
  color:var(--v36-blue)!important;
}
.v31-project-tabs button.active::after{
  background:var(--v36-blue)!important;
}
.v31-project-search{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 118px!important;
  gap:12px!important;
  padding:12px!important;
}
.v31-project-search input{
  height:42px!important;
  border:1px solid #c9d8ea!important;
  border-radius:11px!important;
  padding:0 14px!important;
  font-size:14px!important;
  font-weight:800!important;
}
.v31-project-search button[type="submit"],
.v31-project-search .btn:not(.secondary){
  min-width:112px!important;
  height:42px!important;
  border-radius:11px!important;
  background:var(--v36-blue)!important;
  border-color:var(--v36-blue)!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:900!important;
}
.v31-project-search .btn.secondary{display:none!important;}
.v31-project-list-card{overflow:hidden!important;}
.v31-project-header-row{
  min-height:56px!important;
  background:#f7fafe!important;
  border-bottom:1px solid #e4edf7!important;
  color:var(--v36-text)!important;
  font-weight:900!important;
}
.v31-group-header{
  min-height:54px!important;
  background:#f7fafe!important;
  border-bottom:1px solid #e4edf7!important;
  color:var(--v36-text)!important;
  font-weight:900!important;
}
.v31-project-row{
  min-height:76px!important;
  border-bottom:1px solid #edf2f8!important;
  background:#fff!important;
}
.v31-project-row:hover{background:#f8fbff!important;}
.v31-project-title{
  color:var(--v36-blue)!important;
  font-weight:900!important;
}
.v31-project-badge{
  min-width:88px!important;
  padding:7px 14px!important;
  border-radius:999px!important;
  background:#d9edb6!important;
  color:#5f7e33!important;
  font-size:12px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
}

/* Detail pages: all primary blocks visible and contained */
.ticket-detail-sticky-shell,
.task-detail-sticky-shell,
.project-detail-sticky-shell{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.ticket-focus-primary,
#ticket-latest-message-card,
#ticket-reply-editor-card,
#ticket-history-card,
#ticket-details-card,
#ticket-task-card,
#ticket-ai-card,
#ticket-time-card,
#task-summary-card,
#task-edit-card,
#task-comments-card,
#task-time-card,
#task-files-card,
.card,
.mail-readbox,
.message{
  max-width:100%!important;
  box-sizing:border-box!important;
}

/* We don't allow old JS layers to accidentally hide detail content unless focus mode is explicitly active */
body:not(.ticket-focus-active) .ticket-focus-secondary,
body:not(.ticket-focus-active) #ticket-latest-message-card,
body:not(.ticket-focus-active) #ticket-reply-editor-card,
body:not(.ticket-focus-active) #ticket-history-card,
body:not(.ticket-focus-active) #ticket-details-card,
body:not(.ticket-focus-active) #ticket-task-card,
body:not(.ticket-focus-active) #ticket-ai-card,
body:not(.ticket-focus-active) #ticket-time-card{
  display:block;
}

/* Dynamic action bars */
.ticket-action-stickybar>.ticket-save-state,
.ticket-action-stickybar>[data-ticket-save-state],
.ticket-action-stickybar>[data-ticket-sticky-save]{
  display:none!important;
}
.ticket-action-stickybar,
.task-action-stickybar{
  gap:8px!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
}
.ticket-action-stickybar::-webkit-scrollbar,
.task-action-stickybar::-webkit-scrollbar{display:none!important;}
.ticket-action-stickybar a,
.ticket-action-stickybar button,
.task-action-stickybar a,
.task-action-stickybar button{
  white-space:nowrap!important;
}
.ticket-action-stickybar a.active,
.ticket-action-stickybar button.active,
.task-action-stickybar a.active,
.task-action-stickybar button.active{
  background:var(--v36-blue)!important;
  color:#fff!important;
  border-color:var(--v36-blue)!important;
}
.ticket-subnav,.task-subnav{
  width:100%!important;
  max-width:100%!important;
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px!important;
  padding:10px 12px!important;
  margin:8px 0 12px!important;
  border:1px solid var(--v36-border)!important;
  border-radius:16px!important;
  background:#f8fbff!important;
  box-sizing:border-box!important;
}
.ticket-subnav .quickbar-context,
.ticket-subnav .subnav-label,
.task-subnav .quickbar-context,
.task-subnav .subnav-label{
  color:var(--v36-muted)!important;
  font-size:12px!important;
  font-weight:900!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
  min-width:96px!important;
}
.ticket-subnav .dynamic-chip,
.ticket-subnav a,
.ticket-subnav button,
.task-subnav .dynamic-chip,
.task-subnav a,
.task-subnav button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:36px!important;
  padding:8px 12px!important;
  border:1px solid #c7d8ea!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#143a63!important;
  font-size:13px!important;
  font-weight:900!important;
  text-decoration:none!important;
  cursor:pointer!important;
  white-space:nowrap!important;
}
.ticket-subnav .dynamic-chip.primary,
.ticket-subnav button.primary,
.task-subnav .dynamic-chip.primary,
.task-subnav button.primary{
  background:var(--v36-blue)!important;
  color:#fff!important;
  border-color:var(--v36-blue)!important;
}
.ticket-subnav .dynamic-chip.warning,
.ticket-subnav button.warning{
  background:#fff8eb!important;
  border-color:#e2bd70!important;
  color:#8a5a00!important;
}

/* Scoped sticky save on detail only */
.tf-global-save-host{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin-left:auto!important;
}
.tf-global-save-state{
  color:var(--v36-muted)!important;
  font-size:12px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
.tf-global-save-state.is-dirty{color:#9f6a00!important;}
.tf-global-save-button{
  min-height:36px!important;
  padding:8px 15px!important;
  border:1px solid var(--v36-blue)!important;
  border-radius:999px!important;
  background:var(--v36-blue)!important;
  color:#fff!important;
  font-weight:900!important;
  cursor:pointer!important;
}
.tf-global-save-button:disabled,
.tf-global-save-button.is-disabled{
  opacity:.45!important;
  cursor:not-allowed!important;
  background:#e9eff6!important;
  color:#7a8ca3!important;
  border-color:#d5e1ef!important;
}
.tf-global-managed-submit{display:none!important;}
.tf-form-dirty{
  outline:2px solid rgba(159,106,0,.18)!important;
  outline-offset:3px!important;
}

/* Highlights for jumps */
.tf-jump-highlight{
  outline:2px solid rgba(31,95,159,.28)!important;
  box-shadow:0 0 0 5px rgba(31,95,159,.08)!important;
}

/* Forms and grids: prevent hidden overflow */
.row,.two-col,.grid,.toolbar{
  max-width:100%!important;
}
input,select,textarea,button{
  max-width:100%;
}

/* Mobile: no white right side, no oversized fixed ticket container */
@media(max-width:780px){
  html,body,.site-shell,.site-header,.header-bar,.page-shell,main,.footer-bar{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .tf-v30-header .header-inner{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:10px 12px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px 10px!important;
  }
  .tf-v30-header .brand-inline{
    min-width:0!important;
  }
  .brand-copy strong,.brand-copy small,.user-name,.user-meta{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .header-user-auth,.header-user{
    justify-self:end!important;
    min-width:0!important;
  }
  .user-menu-summary,.header-identity{
    max-width:160px!important;
    min-width:0!important;
    padding:8px 10px!important;
  }
  .tf-v30-topnav,.top-nav{
    grid-column:1/-1!important;
    order:3!important;
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:6px 0 0!important;
    scrollbar-width:none!important;
  }
  .tf-v30-topnav::-webkit-scrollbar,.top-nav::-webkit-scrollbar{display:none!important;}
  .tf-v30-topnav>a,.top-nav>a{
    flex:0 0 auto!important;
    min-height:36px!important;
    padding:0 12px!important;
    font-size:13px!important;
  }
  .page-shell{
    padding:12px 10px 78px!important;
  }
  .v31-projects-top,.v31-tickets-top,.v31-tasks-top{
    flex-direction:column!important;
  }
  .v31-projects-top h1,.v31-tickets-top h1,.v31-tasks-top h1{
    font-size:34px!important;
  }
  .v31-project-search{
    grid-template-columns:1fr!important;
  }
  .ticket-detail-sticky-shell,.task-detail-sticky-shell,.project-detail-sticky-shell{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    max-width:100%!important;
    margin:10px 0 12px!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }
  .ticket-detail-sticky-shell .ticket-title-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
    padding:10px 12px!important;
  }
  .ticket-detail-sticky-shell .module-title{
    min-width:0!important;
    display:grid!important;
    grid-template-columns:9px minmax(0,1fr)!important;
    gap:9px!important;
  }
  .ticket-detail-sticky-shell .module-copy{min-width:0!important;}
  .ticket-detail-sticky-shell .module-copy strong{
    font-size:15px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .ticket-detail-sticky-shell .module-copy small{
    font-size:12px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .ticket-action-stickybar,.task-action-stickybar{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    gap:8px!important;
    padding:8px 10px!important;
  }
  .ticket-action-stickybar a,.ticket-action-stickybar button,
  .task-action-stickybar a,.task-action-stickybar button{
    flex:0 0 auto!important;
    min-height:36px!important;
    padding:8px 11px!important;
    font-size:13px!important;
  }
  .ticket-subnav .quickbar-context,
  .ticket-subnav .subnav-label,
  .task-subnav .quickbar-context,
  .task-subnav .subnav-label{
    flex:0 0 100%!important;
    min-width:0!important;
  }
  .card,.mail-readbox,.message,.two-col,.row,
  #ticket-latest-message-card,#ticket-reply-editor-card,#ticket-history-card,#ticket-details-card,#ticket-task-card,#ticket-ai-card,#ticket-time-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .two-col,.row{
    display:block!important;
  }
  .two-col>*,.row>*{
    width:100%!important;
    max-width:100%!important;
  }
  .mail-readbox .toolbar,
  .mail-readbox .ticket-message-toolbar,
  .mail-readbox .message-toolbar{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
  }
  .mail-readbox button,.mail-readbox .btn{
    min-height:34px!important;
    padding:7px 10px!important;
    font-size:12px!important;
  }
  #ticket-task-card,#ticket-time-card,#ticket-reply-editor-card,#ticket-history-card,#ticket-details-card,#ticket-ai-card,#ticket-latest-message-card{
    scroll-margin-top:145px!important;
  }
  .tf-global-save-host{
    margin-left:0!important;
  }
}