/* TeamAct CRM — Lead Status TeleCRM Visual V2
   Company Admin status colors remain the single source of truth.
   This file styles only status-specific UI and does not alter drawer scrolling. */

/* Shared status palette. Any component carrying lead-status-color-* receives
   the same exact status color plus a soft tag background. */
.lead-status-color-teal{--ls-color:#477a77;--ls-soft:#e0eeec;--ls-text:#315f5a}
.lead-status-color-blue{--ls-color:#4d74b8;--ls-soft:#e9effa;--ls-text:#456391}
.lead-status-color-green{--ls-color:#4f806f;--ls-soft:#e3eee8;--ls-text:#376653}
.lead-status-color-amber{--ls-color:#e9a300;--ls-soft:#fff1cf;--ls-text:#805b00}
.lead-status-color-rose{--ls-color:#ff2a36;--ls-soft:#fde9eb;--ls-text:#9b343d}
.lead-status-color-purple{--ls-color:#7660bd;--ls-soft:#eee9fb;--ls-text:#5b4b95}
.lead-status-color-slate{--ls-color:#8b8b84;--ls-soft:#e9e9e8;--ls-text:#4e4e49}

.lead-status-color-dot{
  width:10px;height:10px;min-width:10px;border-radius:2px;display:inline-block;vertical-align:middle;
  background:var(--ls-color,#8b8b84)!important;
}
.lead-status-color-dot.lead-status-color-teal{--ls-color:#477a77}.lead-status-color-dot.lead-status-color-blue{--ls-color:#4d74b8}
.lead-status-color-dot.lead-status-color-green{--ls-color:#4f806f}.lead-status-color-dot.lead-status-color-amber{--ls-color:#e9a300}
.lead-status-color-dot.lead-status-color-rose{--ls-color:#ff2a36}.lead-status-color-dot.lead-status-color-purple{--ls-color:#7660bd}
.lead-status-color-dot.lead-status-color-slate{--ls-color:#8b8b84}

/* USER / AGENT — status tag in My Leads table.
   High specificity intentionally beats the global teal primary-button theme. */
html body #root .shell #view .mlv2 button.mlv2-status.mlv2-lead-status-chip{
  appearance:none!important;
  min-height:22px!important;height:auto!important;
  padding:2px 8px 2px 9px!important;
  border:0!important;border-left:3px solid var(--ls-color,#8b8b84)!important;
  border-radius:3px!important;
  background:var(--ls-soft,#e9e9e8)!important;background-image:none!important;
  color:var(--ls-text,#333)!important;
  box-shadow:none!important;
  font-size:12px!important;font-weight:500!important;line-height:18px!important;
  white-space:nowrap!important;cursor:pointer!important;
}
html body #root .shell #view .mlv2 button.mlv2-status.mlv2-lead-status-chip:hover:not(:disabled),
html body #root .shell #view .mlv2 button.mlv2-status.mlv2-lead-status-chip:focus-visible{
  background:var(--ls-soft,#e9e9e8)!important;
  color:var(--ls-text,#333)!important;
  outline:1px solid color-mix(in srgb,var(--ls-color,#8b8b84) 52%,#fff)!important;
  outline-offset:1px!important;
}
html body #root .shell #view .mlv2 button.mlv2-status.mlv2-lead-status-chip:disabled{
  cursor:default!important;opacity:.9!important;
}

/* USER / AGENT — white TeleCRM-style status filter trigger. */
.mlv2-lead-status-filter{position:relative;min-width:140px;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end}
.mlv2-filter-caption{font-size:12px;font-weight:600;line-height:18px;color:#222;margin:0 0 3px 1px}
html body #root .shell #view .mlv2 button.mlv2-lead-status-filter-trigger{
  min-width:140px;max-width:220px;height:42px!important;
  background:#fff!important;background-image:none!important;
  color:#3c3c3c!important;border:1px solid #cbd7df!important;
  border-radius:8px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
  padding:0 11px!important;
  font-size:13px!important;font-weight:500!important;line-height:1.2!important;
  box-shadow:none!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
html body #root .shell #view .mlv2 button.mlv2-lead-status-filter-trigger:hover:not(:disabled),
html body #root .shell #view .mlv2 button.mlv2-lead-status-filter-trigger[aria-expanded="true"]{
  background:#fff!important;color:#3c3c3c!important;border-color:#9faeb9!important;
}
html body #root .shell #view .mlv2 button.mlv2-lead-status-filter-trigger>span{font-size:11px!important;color:#666!important;flex:none}

.mlv2-lead-status-filter-popover{
  position:absolute;z-index:90;top:calc(100% + 5px);left:0;width:260px;max-height:390px;
  background:#fff;border:1px solid #e0e3e6;border-radius:5px;box-shadow:0 4px 15px rgba(0,0,0,.18);overflow:hidden;
}
.mlv2-lead-status-filter-popover[hidden]{display:none!important}
.mlv2-status-filter-search{height:41px;display:flex;align-items:center;gap:7px;padding:5px 10px;border-bottom:1px solid #e7e7e7;background:#fff}
.mlv2-status-filter-search svg{width:15px;height:15px;color:#858585}
html body #root .shell #view .mlv2 .mlv2-status-filter-search input{
  height:30px!important;border:0!important;box-shadow:none!important;padding:0 3px!important;font-size:13px!important;background:#fff!important;color:#333!important;
}
.mlv2-status-filter-options{max-height:285px;overflow:auto;padding:4px 0;background:#fff}
.mlv2-status-filter-group{padding:2px 0}
.mlv2-status-filter-group-title{display:flex;justify-content:space-between;align-items:center;padding:6px 12px 4px;color:#9b9b9b;font-size:12px;font-weight:500}
.mlv2-status-filter-option{
  display:flex;align-items:center;gap:9px;min-height:30px;padding:4px 10px;
  font-size:13px;color:#3b3b3b;cursor:pointer;background:#fff;
}
.mlv2-status-filter-option:hover{background:#f6f6f6}
.mlv2-status-filter-option input{
  width:15px;height:15px;margin:0;accent-color:var(--ls-color,#7660bd);flex:none;
}
.mlv2-status-filter-option .lead-status-color-dot{width:10px;height:10px;min-width:10px;border-radius:2px}
.mlv2-status-filter-option>span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mlv2-status-filter-actions{display:flex;justify-content:flex-end;gap:7px;padding:7px 9px;border-top:1px solid #eee;background:#fafafa}
html body #root .shell #view .mlv2 .mlv2-status-filter-actions button{
  min-height:30px!important;padding:4px 10px!important;font-size:12px!important;border-radius:6px!important;
}

/* Floating per-lead status menu — same group/dot language as TeleCRM. */
.mlv2-floating-status-menu{
  position:fixed;z-index:1200;width:250px;max-height:390px;background:#fff;border:1px solid #e0e3e6;border-radius:5px;
  box-shadow:0 4px 15px rgba(0,0,0,.18);overflow:hidden;color:#333;
}
.mlv2-status-menu-search{height:42px;padding:6px 9px;border-bottom:1px solid #e7e7e7;background:#fff}
html body .mlv2-status-menu-search input{width:100%!important;height:30px!important;border:0!important;box-shadow:none!important;padding:0 5px!important;font-size:13px!important;background:#fff!important;color:#333!important}
.mlv2-status-menu-scroll{max-height:330px;overflow:auto;padding:4px 0;background:#fff}
.mlv2-status-menu-group{padding:2px 0}
.mlv2-status-menu-group-title{display:flex;justify-content:space-between;padding:6px 12px 4px;color:#9b9b9b;font-size:12px;font-weight:500}
html body .mlv2-status-menu-option{
  width:100%!important;min-height:31px!important;padding:5px 12px!important;border:0!important;border-radius:0!important;background:#fff!important;color:#333!important;
  display:grid!important;grid-template-columns:10px 1fr 18px!important;align-items:center!important;gap:9px!important;text-align:left!important;
  font-size:13px!important;font-weight:500!important;box-shadow:none!important;
}
html body .mlv2-status-menu-option:hover,html body .mlv2-status-menu-option.is-selected{background:#f4f4f4!important;color:#333!important}
.mlv2-status-menu-option b{color:#6c4de6;font-size:14px;text-align:center}

/* Drawer status uses the exact same Admin-defined status palette. */
html body #root .mlv3-status-trigger{
  background:var(--ls-soft,#f0f0ef)!important;border-color:#d6d6d3!important;color:var(--ls-text,#292929)!important;
}
html body #root .mlv3-status-option .lead-status-color-dot{margin:0!important}

/* Company Admin — status catalog manager. */
.lead-status-admin-page{display:grid;gap:14px}
.lead-status-admin-page .card{margin:0!important}
.lead-status-admin-intro p{max-width:980px;color:#536270;line-height:1.55}
.lead-status-admin-create{display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(135px,.7fr)) auto auto;gap:10px;align-items:end}
.lead-status-admin-create>label:not(.lead-status-admin-check){display:grid;gap:5px;font-size:12px;font-weight:700;color:#526171}
.lead-status-admin-create input,.lead-status-admin-create select{height:40px!important}
.lead-status-admin-check{display:flex;align-items:center;gap:7px;min-height:40px;font-size:13px;font-weight:600;white-space:nowrap}
.lead-status-admin-check input{width:16px;height:16px}
.lead-status-admin-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.lead-status-admin-name{display:flex;align-items:center;gap:9px;min-width:180px}
.lead-status-admin-name>div{display:grid;gap:2px}
.lead-status-admin-name small{color:#8a98a4;font-weight:500}
.lead-status-admin-visible{display:flex;align-items:center;gap:7px;white-space:nowrap;font-size:13px}
.lead-status-admin-visible input{width:16px;height:16px;accent-color:#6c4de6}

.company-lead-status-chip{
  display:inline-flex;align-items:center;gap:7px;min-height:23px;padding:2px 8px;border-radius:3px;
  border-left:3px solid var(--ls-color,#8b8b84);background:var(--ls-soft,#ededeb);color:var(--ls-text,#333);font-size:12px;font-weight:500;
}

@media(max-width:1100px){
  .lead-status-admin-create{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mlv2-lead-status-filter-popover{right:0;left:auto}
}
@media(max-width:700px){
  .lead-status-admin-create{grid-template-columns:1fr}
  .mlv2-lead-status-filter{min-width:0;width:100%}
  html body #root .shell #view .mlv2 button.mlv2-lead-status-filter-trigger{width:100%;max-width:none}
}

/* Company Admin lead-status control: keep the status chip visual instead of
   inheriting the CRM's primary button styling. */
html body #root button.company-lead-status-chip.company-lead-status-button{
  appearance:none!important;background:var(--ls-soft,#ededeb)!important;background-image:none!important;
  color:var(--ls-text,#333)!important;border:0!important;border-left:3px solid var(--ls-color,#8b8b84)!important;
  box-shadow:none!important;min-height:23px!important;height:auto!important;padding:2px 8px!important;
  border-radius:3px!important;font-size:12px!important;font-weight:500!important;line-height:18px!important;cursor:pointer!important;
}
html body #root button.company-lead-status-chip.company-lead-status-button:hover{
  outline:1px solid color-mix(in srgb,var(--ls-color,#8b8b84) 48%,#fff)!important;outline-offset:1px!important;
}

/* Converted is still a visible status tag, but User / Agent cannot reopen it. */
html body #root .mlv2-lead-status-chip.is-converted-locked:disabled,
html body #root .mlv3-status-trigger.is-converted-locked:disabled{
  opacity:1!important;filter:none!important;cursor:default!important;
}
body.crm-user-panel .mlv4-action-list button.is-converted-action:disabled{
  opacity:.72!important;background:#fafafa!important;color:#6c4de6!important;
}

/* V13.9.2d | My Leads > Status filter: compact checkbox rows.
   The generic .mlv2-toolbar input { min-height:42px } was also applied to
   checkboxes here, stretching each status option to ~50px. Keep the toolbar's
   42px search/filter controls unchanged; reset only these status checkboxes. */
html body #root .shell #view .mlv2 .mlv2-lead-status-filter-popover
.mlv2-status-filter-option input[type="checkbox"] {
  box-sizing: border-box;
  width: 15px !important;
  min-width: 15px !important;
  height: 15px !important;
  min-height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 15px;
}