/* TeamAct CRM — Global Navigation, Date Range & Scroll UX V1 */

/* ---------- Date inputs ---------- */
.crm-date-input{
  cursor:pointer!important;
  caret-color:transparent;
}
.crm-date-input::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.7;
}

/* ---------- TeamAct date picker ---------- */
.crm-date-picker{
  position:fixed;
  z-index:12050;
  background:#ffffff;
  border:1px solid #d7e0e7;
  border-radius:12px;
  box-shadow:0 18px 48px rgba(21,49,69,.22);
  padding:10px;
  color:#17354a;
  font-family:var(--crm-font-family,Arial,Helvetica,sans-serif);
}
.crm-date-picker-head{
  display:grid;
  grid-template-columns:36px 1fr 36px;
  align-items:center;
  gap:7px;
  padding:2px 2px 9px;
}
.crm-date-picker-head>div{
  text-align:center;
  min-width:0;
}
.crm-date-picker-head strong{
  display:block;
  font-size:14px!important;
  color:#17354a!important;
}
.crm-date-picker-head small{
  display:block;
  margin-top:2px;
  color:#748694!important;
  font-size:11px!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
html body .crm-date-picker button{
  font-family:inherit;
}
html body .crm-date-picker .crm-date-picker-head>button{
  width:34px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0!important;
  border:1px solid #d8e2e8!important;
  border-radius:9px!important;
  background:#ffffff!important;
  background-image:none!important;
  color:#405a6c!important;
  box-shadow:none!important;
  font-size:20px!important;
}
html body .crm-date-picker .crm-date-picker-head>button:hover{
  background:#f3f5f7!important;
  color:#5d3fd3!important;
}
.crm-date-weekdays,
.crm-date-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px;
}
.crm-date-weekdays{
  padding:3px 2px 5px;
}
.crm-date-weekdays span{
  text-align:center;
  color:#6d7f8c!important;
  font-size:11px!important;
  font-weight:800;
}
html body .crm-date-picker button.crm-date-day{
  position:relative;
  width:100%!important;
  min-width:0!important;
  height:37px!important;
  min-height:37px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#ffffff!important;
  background-image:none!important;
  color:#263f52!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:700!important;
}
html body .crm-date-picker button.crm-date-day.outside{
  color:#aab5bd!important;
}
html body .crm-date-picker button.crm-date-day.today:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:3px;
  width:4px;
  height:4px;
  margin-left:-2px;
  border-radius:50%;
  background:#5d3fd3;
}
/* User-requested range: light GREY between selected start/end. */
html body .crm-date-picker button.crm-date-day.in-range{
  background:#e9edf0!important;
  color:#20394c!important;
}
html body .crm-date-picker button.crm-date-day.range-start,
html body .crm-date-picker button.crm-date-day.range-end{
  background:#5d3fd3!important;
  color:#ffffff!important;
  border-radius:8px!important;
}
html body .crm-date-picker button.crm-date-day:hover:not(:disabled){
  background:#f1efff!important;
  color:#4f36c2!important;
  border-radius:8px!important;
}
html body .crm-date-picker button.crm-date-day.range-start:hover:not(:disabled),
html body .crm-date-picker button.crm-date-day.range-end:hover:not(:disabled){
  background:#5137bd!important;
  color:#ffffff!important;
}
html body .crm-date-picker button.crm-date-day:disabled{
  opacity:.35!important;
  cursor:not-allowed!important;
}
.crm-date-picker-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  padding-top:10px;
  margin-top:7px;
  border-top:1px solid #e7edf1;
}
html body .crm-date-picker .crm-date-picker-foot button{
  min-height:34px!important;
  padding:7px 10px!important;
  border-radius:8px!important;
  box-shadow:none!important;
}
html body .crm-date-picker .crm-date-picker-foot button.secondary{
  background:#ffffff!important;
  background-image:none!important;
  color:#465f71!important;
  border:1px solid #d7e1e8!important;
}
html body .crm-date-picker .crm-date-picker-foot button:not(.secondary){
  background:#5d3fd3!important;
  background-image:none!important;
  color:#ffffff!important;
  border:1px solid #5d3fd3!important;
}

/* ---------- Scroll handoff / no "dead wheel" over tables ---------- */
/* Ordinary report tables scroll horizontally only; page owns vertical scrolling. */
#view .tablewrap:not(.modal-backdrop .tablewrap),
#view .mr-table-wrap,
#view .member-calls-table-wrap{
  overflow-x:auto!important;
  overflow-y:visible!important;
  overscroll-behavior-y:auto!important;
}
/* Purpose-built vertical work areas keep vertical scrolling, but hand off at edges. */
#view .mlv2-sheet-wrap,
#view .scroll,
#view .lead-detail-history{
  overscroll-behavior-y:auto!important;
}

/* Native page scrolling should always remain available in the main workspace. */
html,body{
  overscroll-behavior-y:auto;
}
.main,.workspace,#view{
  overscroll-behavior-y:auto;
}

/* Dark mode */
html.theme-dark .crm-date-picker{
  background:#173142;
  border-color:#395467;
  color:#f3f8fb;
}
html.theme-dark .crm-date-picker-head strong{color:#f3f8fb!important}
html.theme-dark .crm-date-picker-head small,
html.theme-dark .crm-date-weekdays span{color:#b7c5cf!important}
html.theme-dark body .crm-date-picker button.crm-date-day{
  background:#173142!important;
  color:#dce7ee!important;
}
html.theme-dark body .crm-date-picker button.crm-date-day.outside{color:#718794!important}
html.theme-dark body .crm-date-picker button.crm-date-day.in-range{
  background:#46515a!important;
  color:#ffffff!important;
}
html.theme-dark body .crm-date-picker button.crm-date-day.range-start,
html.theme-dark body .crm-date-picker button.crm-date-day.range-end{
  background:#8f78eb!important;
  color:#ffffff!important;
}

/* ==========================================================
   TEAMACT GLOBAL DATE PICKER V2 — COMPACT RANGE UI
   2026-10-11
   ========================================================== */

.crm-date-picker{
  width:296px!important;
  max-width:calc(100vw - 16px)!important;
  padding:8px!important;
  border-radius:10px!important;
  box-shadow:0 12px 32px rgba(21,49,69,.20)!important;
}

.crm-date-picker-head{
  grid-template-columns:30px 1fr 30px!important;
  gap:5px!important;
  padding:0 0 7px!important;
}
.crm-date-picker-head strong{
  font-size:13px!important;
}
.crm-date-picker-head small{
  margin-top:1px!important;
  font-size:10px!important;
}
html body .crm-date-picker .crm-date-picker-head>button{
  width:29px!important;
  height:29px!important;
  min-height:29px!important;
  border-radius:7px!important;
  font-size:18px!important;
}

.crm-date-weekdays,
.crm-date-grid{
  gap:1px!important;
}
.crm-date-weekdays{
  padding:2px 0 4px!important;
}
.crm-date-weekdays span{
  font-size:10px!important;
}

html body .crm-date-picker button.crm-date-day{
  height:31px!important;
  min-height:31px!important;
  font-size:11px!important;
  font-weight:700!important;
}

/* Keep selected range calm/light, like a spreadsheet/calendar range. */
html body .crm-date-picker button.crm-date-day.in-range{
  background:#eceff1!important;
  color:#263f52!important;
}
html body .crm-date-picker button.crm-date-day.range-start,
html body .crm-date-picker button.crm-date-day.range-end{
  background:#5d3fd3!important;
  color:#fff!important;
  border-radius:7px!important;
}

/* Avoid hover repainting the grey middle of an already-selected range. */
html body .crm-date-picker button.crm-date-day.in-range:hover:not(.range-start):not(.range-end){
  background:#e5e9ec!important;
  color:#263f52!important;
  border-radius:0!important;
}

.crm-date-picker-foot{
  gap:5px!important;
  padding-top:7px!important;
  margin-top:5px!important;
}
html body .crm-date-picker .crm-date-picker-foot button{
  min-height:30px!important;
  padding:5px 8px!important;
  font-size:11px!important;
  border-radius:7px!important;
}

/* Range selection helper: after first date, make the second-click state obvious. */
.crm-date-picker[data-selecting="end"] .crm-date-picker-head small{
  color:#5d3fd3!important;
  font-weight:800!important;
}

@media(max-width:420px){
  .crm-date-picker{
    width:min(288px,calc(100vw - 12px))!important;
    padding:7px!important;
  }
  html body .crm-date-picker button.crm-date-day{
    height:30px!important;
    min-height:30px!important;
  }
}

/* ==========================================================
   TEAMACT GLOBAL DATE PICKER V3 — SINGLE CALENDAR MODE
   2026-10-11
   Native browser calendar is completely hidden.
   The real input[type=date] remains in the DOM for forms/backend,
   while one visible TeamAct proxy control opens the custom calendar.
   ========================================================== */

.crm-date-control{
  position:relative!important;
  display:inline-flex!important;
  width:100%!important;
  min-width:0!important;
  vertical-align:middle!important;
}

/* Keep real date input for form value/validation, but make it inaccessible
   to mouse/keyboard so Chrome/Edge cannot open a second native calendar. */
.crm-date-native-source{
  position:absolute!important;
  inset:auto!important;
  width:1px!important;
  height:1px!important;
  min-width:1px!important;
  min-height:1px!important;
  padding:0!important;
  margin:0!important;
  opacity:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
  clip-path:inset(50%)!important;
}

/* One visible date control across the CRM. */
html body .crm-date-proxy{
  width:100%!important;
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:8px 11px!important;
  margin:0!important;
  background:#ffffff!important;
  background-image:none!important;
  color:#243f53!important;
  border:1px solid #cbdce6!important;
  border-radius:9px!important;
  box-shadow:none!important;
  text-align:left!important;
  font-weight:700!important;
}
html body .crm-date-proxy:hover,
html body .crm-date-proxy:focus-visible{
  background:#ffffff!important;
  color:#243f53!important;
  border-color:#55b9c8!important;
  box-shadow:0 0 0 3px rgba(26,154,174,.12)!important;
  outline:0!important;
}
html body .crm-date-proxy.is-empty .crm-date-proxy-value{
  color:#8a9aa7!important;
  font-weight:600!important;
}
.crm-date-proxy-value{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.crm-date-proxy-icon{
  flex:none;
  width:20px;
  height:20px;
  display:grid!important;
  place-items:center;
  color:#60798c!important;
  font-size:13px!important;
}

/* Compact popup: one calendar only. */
.crm-date-picker{
  width:286px!important;
  max-width:calc(100vw - 16px)!important;
}
html body .crm-date-picker button.crm-date-day{
  height:30px!important;
  min-height:30px!important;
}

/* Clear/Today only — no redundant Apply button after auto-apply behavior. */
.crm-date-picker-foot{
  justify-content:space-between!important;
}
html body .crm-date-picker .crm-date-picker-foot button{
  flex:1 1 0!important;
}

/* Existing report date control should not become overly wide. */
.mr-range .crm-date-control{
  width:160px!important;
  flex:0 0 160px!important;
}

/* Dark mode proxy */
html.theme-dark body .crm-date-proxy{
  background:#173142!important;
  color:#edf5fa!important;
  border-color:#3c596b!important;
}
html.theme-dark body .crm-date-proxy.is-empty .crm-date-proxy-value{
  color:#8ea3b1!important;
}

/* ==========================================================
   TEAMACT GLOBAL DATE PICKER V4 — WHITE CONTROL + MANUAL RANGE
   2026-10-11
   ========================================================== */

/* Global CRM teal button rules must NEVER repaint date controls. */
html body button.crm-date-proxy,
html body #root button.crm-date-proxy,
html body #root .shell button.crm-date-proxy,
html body #root .shell #view button.crm-date-proxy{
  background:#ffffff!important;
  background-image:none!important;
  color:#243f53!important;
  border:1px solid #cbdce6!important;
  box-shadow:none!important;
}
html body button.crm-date-proxy:hover,
html body button.crm-date-proxy:focus-visible,
html body #root .shell #view button.crm-date-proxy:hover,
html body #root .shell #view button.crm-date-proxy:focus-visible{
  background:#ffffff!important;
  background-image:none!important;
  color:#243f53!important;
  border-color:#55b9c8!important;
  box-shadow:0 0 0 3px rgba(26,154,174,.12)!important;
}

/* Date text/icon remain neutral on the white button. */
html body .crm-date-proxy .crm-date-proxy-value{
  color:#243f53!important;
}
html body .crm-date-proxy .crm-date-proxy-icon{
  color:#60798c!important;
}

/* Range selection: middle dates are deliberately light grey. */
html body .crm-date-picker button.crm-date-day.in-range{
  background:#e9edf0!important;
  color:#263f52!important;
}
html body .crm-date-picker button.crm-date-day.range-start,
html body .crm-date-picker button.crm-date-day.range-end{
  background:#5d3fd3!important;
  color:#ffffff!important;
  border-radius:7px!important;
}

/* Manual Apply Range button. */
html body .crm-date-picker .crm-date-picker-foot button[data-cal-apply]{
  flex:1.2 1 0!important;
  background:#5d3fd3!important;
  background-image:none!important;
  color:#ffffff!important;
  border:1px solid #5d3fd3!important;
  box-shadow:none!important;
}
html body .crm-date-picker .crm-date-picker-foot button[data-cal-apply]:disabled{
  background:#eef1f3!important;
  color:#9aa8b2!important;
  border-color:#dce3e8!important;
  opacity:1!important;
  cursor:not-allowed!important;
}

/* When a range is complete, keep it visible until Apply Range. */
.crm-date-picker[data-selecting="done"] .crm-date-picker-head small{
  color:#4f36c2!important;
  font-weight:800!important;
}