/* MARK AS DONE — rebuilt view controls v28
   One component template for Board, List, Calendar, Upcoming and Timeline.
   Behavior-specific legacy classes remain only as JS hooks; they do not own visual styling. */

:root{
  --vc-height:36px;
  --vc-radius:5px;
  --vc-border:var(--ui-border-strong,#d6dde7);
  --vc-border-hover:#cdd5df;
  --vc-bg:#fff;
  --vc-bg-hover:#f7f9fb;
  --vc-fg:#394150;
  --vc-muted:#667085;
  --vc-accent:#4f7df3;
  --vc-shadow-focus:0 0 0 3px rgba(79,125,243,.12);
}

/* The same right-side control rail on every top-level view. */
.view-header>.view-header-controls.vc-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.view-header>.view-header-controls.vc-toolbar.hidden{display:none!important}

/* Universal control surfaces. */
.vc-btn,.vc-select,.vc-input,.vc-details>summary{
  box-sizing:border-box;
  height:var(--vc-height);
  min-height:var(--vc-height);
  margin:0;
  border:1px solid var(--vc-border);
  border-radius:var(--vc-radius);
  background:var(--vc-bg);
  color:var(--vc-fg);
  box-shadow:none;
  font:700 10px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  outline:0;
}
.vc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 12px;
  white-space:nowrap;
  cursor:pointer;
  appearance:none;
}
.vc-btn i{font-size:10px;line-height:1}
.vc-icon-btn{width:var(--vc-height);min-width:var(--vc-height);padding:0}
.vc-select{
  min-width:132px;
  padding:0 30px 0 11px;
  font-size:11px;
  font-weight:650;
  appearance:auto;
}
.vc-input{
  min-width:164px;
  padding:0 11px;
  font-size:11px;
  font-weight:650;
}

.vc-btn:hover:not(:disabled),.vc-details>summary:hover{background:var(--vc-bg-hover);border-color:var(--vc-border-hover)}
.vc-btn:focus-visible,.vc-select:focus-visible,.vc-input:focus-visible,.vc-details>summary:focus-visible{border-color:var(--vc-accent);box-shadow:var(--vc-shadow-focus)}
.vc-btn:disabled,.vc-select:disabled,.vc-input:disabled{opacity:.48;cursor:not-allowed}
.vc-btn.active,.vc-btn.is-active,.vc-btn[aria-pressed="true"]{background:var(--vc-accent);border-color:var(--vc-accent);color:#fff}


/* Compact datetime control: label and native input share one 38px surface. */
.vc-date-control{
  box-sizing:border-box;
  display:inline-flex;
  align-items:stretch;
  height:var(--vc-height);
  min-height:var(--vc-height);
  margin:0;
  overflow:hidden;
  border:1px solid var(--vc-border);
  border-radius:var(--vc-radius);
  background:var(--vc-bg);
  color:var(--vc-fg);
  flex:0 0 auto;
}
.vc-date-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:46px;
  padding:0 9px;
  border-right:1px solid var(--vc-border);
  background:#f7f9fb;
  color:var(--vc-muted);
  font-size:9px;
  font-weight:800;
  line-height:1;
  letter-spacing:.045em;
  text-transform:uppercase;
  white-space:nowrap;
}
.vc-date-input{
  box-sizing:border-box;
  width:196px;
  min-width:196px;
  height:calc(var(--vc-height) - 2px);
  min-height:calc(var(--vc-height) - 2px);
  margin:0!important;
  padding:0 10px!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  color:var(--vc-fg);
  box-shadow:none!important;
  outline:0;
  font:650 11px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.vc-date-control:hover{border-color:var(--vc-border-hover)}
.vc-date-control:focus-within{border-color:var(--vc-accent);box-shadow:var(--vc-shadow-focus)}
.vc-date-input:focus{outline:0!important;box-shadow:none!important}
.vc-date-input::-webkit-calendar-picker-indicator{cursor:pointer;margin:0 0 0 8px}

/* Segmented choices use the same rounded button atom as every other page control.
   Grouping is semantic only; it must not create hard inner edges. */
.vc-segment{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:var(--vc-height);
  min-height:var(--vc-height);
  margin:0;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
}
.vc-segment>.vc-btn{
  height:var(--vc-height);
  min-height:var(--vc-height);
  border:1px solid var(--vc-border);
  border-radius:var(--vc-radius);
  background:var(--vc-bg);
}
.vc-segment>.vc-btn+.vc-btn{border-left:1px solid var(--vc-border)}
.vc-segment>.vc-btn.active,.vc-segment>.vc-btn.is-active,.vc-segment>.vc-btn[aria-pressed="true"]{background:var(--vc-accent);border-color:var(--vc-accent);color:#fff}

/* Labeled fields — Timeline dates use this same atom instead of owning a custom layout. */
.vc-field{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:var(--vc-height);
  margin:0;
}
.vc-field>span{
  color:var(--vc-muted);
  font-size:9px;
  font-weight:800;
  line-height:1;
  letter-spacing:.045em;
  text-transform:uppercase;
  white-space:nowrap;
}
.vc-meta{
  display:inline-flex;
  align-items:center;
  height:var(--vc-height);
  padding:0 4px;
  color:var(--vc-muted);
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

.vc-details{position:relative;margin:0}
.vc-details>summary{
  min-width:150px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:0 10px;
  cursor:pointer;
  list-style:none;
}
.vc-details>summary::-webkit-details-marker{display:none}
.vc-details .god-bulk-reviewer-menu{z-index:1200}

/* One header contract across views. */
.view-shell>.view-header{
  box-sizing:border-box;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.view-shell>.view-header>.view-header-main{min-width:0;flex:1 1 auto}
.view-shell>.view-header>.view-header-controls{flex:0 0 auto}

/* Board itself is a grid, so its shared header spans the grid without changing the template. */
#board>.view-header{grid-column:1/-1;width:100%}

/* No per-view visual selectors below this point. Responsive behavior is component-level only. */


/* v1.0.133 — canonical page-control visual authority.
   Keep behavior hooks in legacy classes, but geometry belongs only to vc-* atoms. */
body.mortx-ui-shell .view-header .vc-toolbar,
body.mortx-ui-shell .view-header .page-primary-action-host{
  align-items:center!important;
  gap:8px!important;
}
body.mortx-ui-shell .view-header .vc-btn,
body.mortx-ui-shell .view-header .vc-select,
body.mortx-ui-shell .view-header .vc-input,
body.mortx-ui-shell .view-header .vc-details>summary,
body.mortx-ui-shell .view-header .vc-date-control{
  box-sizing:border-box!important;
  height:var(--vc-height)!important;
  min-height:var(--vc-height)!important;
  border:1px solid var(--vc-border)!important;
  border-radius:var(--vc-radius)!important;
  box-shadow:none!important;
}
body.mortx-ui-shell .view-header .vc-btn{
  padding:0 12px!important;
  line-height:1!important;
}
body.mortx-ui-shell .view-header .vc-icon-btn{
  width:var(--vc-height)!important;
  min-width:var(--vc-height)!important;
  padding:0!important;
}
body.mortx-ui-shell .view-header .vc-date-control{
  overflow:hidden!important;
  padding:0!important;
  background:var(--vc-bg)!important;
}
body.mortx-ui-shell .view-header .vc-date-label{
  height:100%!important;
  border:0!important;
  border-right:1px solid var(--vc-border)!important;
  border-radius:0!important;
}
body.mortx-ui-shell .view-header .vc-date-input{
  height:100%!important;
  min-height:100%!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.mortx-ui-shell .view-header .vc-segment{
  height:var(--vc-height)!important;
  min-height:var(--vc-height)!important;
  gap:8px!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
body.mortx-ui-shell .view-header .vc-segment>.vc-btn,
body.mortx-ui-shell .view-header .vc-segment>.vc-btn:first-child,
body.mortx-ui-shell .view-header .vc-segment>.vc-btn:last-child{
  margin:0!important;
  border:1px solid var(--vc-border)!important;
  border-radius:var(--vc-radius)!important;
}
body.mortx-ui-shell .view-header .vc-btn.active,
body.mortx-ui-shell .view-header .vc-btn.is-active,
body.mortx-ui-shell .view-header .vc-btn[aria-pressed="true"]{
  border-color:var(--vc-accent)!important;
  background:var(--vc-accent)!important;
  color:#fff!important;
}
body.mortx-ui-shell .view-header .vc-btn.vc-primary,
body.mortx-ui-shell .page-primary-action-host .page-add-task-btn{
  height:var(--vc-height)!important;
  min-height:var(--vc-height)!important;
  padding:0 12px!important;
  border:1px solid var(--vc-accent)!important;
  border-radius:var(--vc-radius)!important;
  background:var(--vc-accent)!important;
  color:#fff!important;
  box-shadow:none!important;
}
body.mortx-ui-shell .view-header .vc-btn.vc-primary:hover,
body.mortx-ui-shell .page-primary-action-host .page-add-task-btn:hover{
  border-color:#3f6fe8!important;
  background:#3f6fe8!important;
}

/* Bulk Output selector: bounded native popup labels + bounded toolbar footprint.
   Do not override global vc-select rules or the task-saving model. */
#listView #godBulkOutputSelect{
  box-sizing:border-box;
  width:220px!important;
  min-width:0!important;
  max-width:min(220px,32vw)!important;
  flex:0 0 220px!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#listView #godBulkApplyBtn{flex:0 0 auto;white-space:nowrap}
#listView #godBulkSelectionCount{flex:0 0 auto}
@media(max-width:850px){
  #listView #godBulkOutputSelect{width:155px!important;max-width:155px!important;flex-basis:155px!important}
}