.cdk-global-overlay-wrapper,.cdk-overlay-container{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:1000;display:-webkit-box;display:-ms-flexbox;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;-webkit-transition:opacity .4s cubic-bezier(.25,.8,.25,1);transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}@media screen and (-ms-high-contrast:active){.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.288)}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.owl-dialog-container{position:relative;pointer-events:auto;-webkit-box-sizing:border-box;box-sizing:border-box;display:block;padding:1.5em;-webkit-box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);border-radius:2px;overflow:auto;background:#fff;color:rgba(0,0,0,.87);width:100%;height:100%;outline:0}.owl-dt-container,.owl-dt-container *{-webkit-box-sizing:border-box;box-sizing:border-box}.owl-dt-container{display:block;font-size:16px;font-size:1rem;background:#fff;pointer-events:auto;z-index:1000}.owl-dt-container-row{border-bottom:1px solid rgba(0,0,0,.12)}.owl-dt-container-row:last-child{border-bottom:none}.owl-dt-calendar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:100%}.owl-dt-calendar-control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1em;width:100%;padding:.5em;color:#000}.owl-dt-calendar-control .owl-dt-calendar-control-content{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.owl-dt-calendar-control .owl-dt-calendar-control-content .owl-dt-calendar-control-button{padding:0 .8em}.owl-dt-calendar-control .owl-dt-calendar-control-content .owl-dt-calendar-control-button:hover{background-color:rgba(0,0,0,.12)}.owl-dt-calendar-main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:0 .5em .5em;outline:0}.owl-dt-calendar-view{display:block;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.owl-dt-calendar-multi-year-view{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.owl-dt-calendar-multi-year-view .owl-dt-calendar-table{width:calc(100% - 3em)}.owl-dt-calendar-multi-year-view .owl-dt-calendar-table .owl-dt-calendar-header th{padding-bottom:.25em}.owl-dt-calendar-table{width:100%;border-collapse:collapse;border-spacing:0}.owl-dt-calendar-table .owl-dt-calendar-header{color:rgba(0,0,0,.4)}.owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-weekdays th{font-size:.7em;font-weight:400;text-align:center;padding-bottom:1em}.owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-calendar-table-divider{position:relative;height:1px;padding-bottom:.5em}.owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-calendar-table-divider:after{content:'';position:absolute;top:0;left:-.5em;right:-.5em;height:1px;background:rgba(0,0,0,.12)}.owl-dt-calendar-table .owl-dt-calendar-cell{position:relative;height:0;line-height:0;text-align:center;outline:0;color:rgba(0,0,0,.85);-webkit-appearance:none;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}.owl-dt-calendar-table .owl-dt-calendar-cell-content{position:absolute;top:5%;left:5%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;width:90%;height:90%;font-size:.8em;line-height:1;border:1px solid transparent;border-radius:999px;color:inherit;cursor:pointer}.owl-dt-calendar-table .owl-dt-calendar-cell-out{opacity:.2}.owl-dt-calendar-table .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected){border-color:rgba(0,0,0,.4)}.owl-dt-calendar-table .owl-dt-calendar-cell-selected{color:rgba(255,255,255,.85);background-color:#3f51b5}.owl-dt-calendar-table .owl-dt-calendar-cell-selected.owl-dt-calendar-cell-today{-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85)}.owl-dt-calendar-table .owl-dt-calendar-cell-disabled{cursor:default}.owl-dt-calendar-table .owl-dt-calendar-cell-disabled>.owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected){color:rgba(0,0,0,.4)}.owl-dt-calendar-table .owl-dt-calendar-cell-disabled>.owl-dt-calendar-cell-content.owl-dt-calendar-cell-selected{opacity:.4}.owl-dt-calendar-table .owl-dt-calendar-cell-disabled>.owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected){border-color:rgba(0,0,0,.2)}.owl-dt-calendar-table .owl-dt-calendar-cell-active:focus>.owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected),.owl-dt-calendar-table :not(.owl-dt-calendar-cell-disabled):hover>.owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected){background-color:rgba(0,0,0,.04)}.owl-dt-calendar-table .owl-dt-calendar-cell-in-range{background:rgba(63,81,181,.2)}.owl-dt-calendar-table .owl-dt-calendar-cell-in-range.owl-dt-calendar-cell-range-from{border-top-left-radius:999px;border-bottom-left-radius:999px}.owl-dt-calendar-table .owl-dt-calendar-cell-in-range.owl-dt-calendar-cell-range-to{border-top-right-radius:999px;border-bottom-right-radius:999px}.owl-dt-timer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;height:7em;padding:.5em;outline:0}.owl-dt-timer-box{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:25%;height:100%}.owl-dt-timer-content{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;margin:.2em 0}.owl-dt-timer-content .owl-dt-timer-input{display:block;width:2em;text-align:center;border:1px solid rgba(0,0,0,.5);border-radius:3px;outline:medium none;font-size:1.2em;padding:.2em}.owl-dt-timer-divider{display:inline-block;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;position:absolute;width:.6em;height:100%;left:-.3em}.owl-dt-timer-divider:after,.owl-dt-timer-divider:before{content:'';display:inline-block;width:.35em;height:.35em;position:absolute;left:50%;border-radius:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:currentColor}.owl-dt-timer-divider:before{top:35%}.owl-dt-timer-divider:after{bottom:35%}.owl-dt-control-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;margin:0;padding:0;background-color:transparent;font-size:1em;color:inherit}.owl-dt-control-button .owl-dt-control-button-content{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;outline:0}.owl-dt-control-period-button .owl-dt-control-button-content{height:1.5em;padding:0 .5em;border-radius:3px;-webkit-transition:background-color .1s linear;transition:background-color .1s linear}.owl-dt-control-period-button:hover>.owl-dt-control-button-content{background-color:rgba(0,0,0,.12)}.owl-dt-control-period-button .owl-dt-control-button-arrow{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:1em;height:1em;margin:.1em;-webkit-transition:-webkit-transform .2s ease;transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease, -webkit-transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease}.owl-dt-control-arrow-button .owl-dt-control-button-content{padding:0;border-radius:50%;width:1.5em;height:1.5em}.owl-dt-control-arrow-button[disabled]{color:rgba(0,0,0,.4);cursor:default}.owl-dt-control-arrow-button svg{width:50%;height:50%;fill:currentColor}.owl-dt-inline-container,.owl-dt-popup-container{position:relative;width:18.5em;-webkit-box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.owl-dt-inline-container .owl-dt-calendar,.owl-dt-inline-container .owl-dt-timer,.owl-dt-popup-container .owl-dt-calendar,.owl-dt-popup-container .owl-dt-timer{width:100%}.owl-dt-inline-container .owl-dt-calendar,.owl-dt-popup-container .owl-dt-calendar{height:20.25em}.owl-dt-dialog-container{max-height:95vh;margin:-1.5em}.owl-dt-dialog-container .owl-dt-calendar{min-width:250px;min-height:330px;max-width:750px;max-height:750px}.owl-dt-dialog-container .owl-dt-timer{min-width:250px;max-width:750px}@media all and (orientation:landscape){.owl-dt-dialog-container .owl-dt-calendar{width:58vh;height:62vh}.owl-dt-dialog-container .owl-dt-timer{width:58vh}}@media all and (orientation:portrait){.owl-dt-dialog-container .owl-dt-calendar{width:80vw;height:80vw}.owl-dt-dialog-container .owl-dt-timer{width:80vw}}.owl-dt-container-buttons{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;height:2em;color:#3f51b5}.owl-dt-container-control-button{font-size:1em;width:50%;height:100%;border-radius:0}.owl-dt-container-control-button .owl-dt-control-button-content{height:100%;width:100%;-webkit-transition:background-color .1s linear;transition:background-color .1s linear}.owl-dt-container-control-button:hover .owl-dt-control-button-content{background-color:rgba(0,0,0,.1)}.owl-dt-container-info{padding:0 .5em;cursor:pointer;-webkit-tap-highlight-color:transparent}.owl-dt-container-info .owl-dt-container-range{outline:0}.owl-dt-container-info .owl-dt-container-range .owl-dt-container-range-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:.5em 0;font-size:.8em}.owl-dt-container-info .owl-dt-container-range:last-child{border-top:1px solid rgba(0,0,0,.12)}.owl-dt-container-info .owl-dt-container-info-active{color:#3f51b5}.owl-dt-container-disabled,.owl-dt-trigger-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none;cursor:default!important}.owl-dt-timer-hour12{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#3f51b5}.owl-dt-timer-hour12 .owl-dt-timer-hour12-box{border:1px solid currentColor;border-radius:2px;-webkit-transition:background .2s ease;transition:background .2s ease}.owl-dt-timer-hour12 .owl-dt-timer-hour12-box .owl-dt-control-button-content{width:100%;height:100%;padding:.5em}.owl-dt-timer-hour12 .owl-dt-timer-hour12-box:focus .owl-dt-control-button-content,.owl-dt-timer-hour12 .owl-dt-timer-hour12-box:hover .owl-dt-control-button-content{background:#3f51b5;color:#fff}.owl-dt-calendar-only-current-month .owl-dt-calendar-cell-out{visibility:hidden;cursor:default}.owl-dt-inline{display:inline-block}.owl-dt-control{outline:0;cursor:pointer}.owl-dt-control .owl-dt-control-content{outline:0}.owl-dt-control:focus>.owl-dt-control-content{background-color:rgba(0,0,0,.12)}.owl-dt-control:not(:-moz-focusring):focus>.owl-dt-control-content{box-shadow:none}.owl-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.ng-select.ng-select-opened>.ng-select-container:hover{-webkit-box-shadow:none;box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #333}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:#007eff;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 0 3px rgba(0,126,255,0.1);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 0 3px rgba(0,126,255,0.1)}.ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#333;background-color:#fff;border-radius:4px;border:1px solid #ccc;min-height:36px;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.ng-select .ng-select-container:hover{-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.06);box-shadow:0 1px 0 rgba(0,0,0,0.06)}.ng-select .ng-select-container .ng-value-container{-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:10px}[dir="rtl"] .ng-select .ng-select-container .ng-value-container{padding-right:10px;padding-left:0}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#999}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:5px;left:0;padding-left:10px;padding-right:50px}[dir="rtl"] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{padding-right:10px;padding-left:50px}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e6e6e6}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-right:7px;padding-left:0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;background-color:#ebf5ff;border-radius:2px;margin-right:5px}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin-right:0;margin-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:0;padding-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-left:1px solid #b8dbff;border-right:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:0;border-right:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 3px 3px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:5px;padding-left:3px}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-right:3px;padding-left:0}.ng-select .ng-clear-wrapper{color:#999}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#D0021B}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}[dir="rtl"] .ng-select .ng-spinner-zone{padding:5px 0 0 5px}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}[dir="rtl"] .ng-select .ng-arrow-wrapper{padding-left:5px;padding-right:0}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:1px solid #ccc;-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.06);box-shadow:0 1px 0 rgba(0,0,0,0.06);left:0}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:rgba(0,0,0,0.54);cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{background-color:#ebf5ff;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:rgba(0,0,0,0.87);padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#333;background-color:#ebf5ff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#f5faff;color:#333}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}[dir="rtl"] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:22px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}[dir="rtl"] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}[dir="rtl"] .ng-dropdown-panel{direction:rtl;text-align:right}.multiselect-dropdown .dropdown-btn span.selected-item {
  margin: 2px;
  gap: 4px;
  padding: 2px 6px 4px 8px !important;
  background: var(--blue-light-1) !important;
  color: var(--blue) !important;
  border-radius: 999px !important;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border: 0 !important;
}.multiselect-dropdown .dropdown-btn span.selected-item a {
  color: var(--blue) !important;
}.cdk-overlay-container {
  z-index: 1100 !important;
}html,
body {
  height: 100%;
}.multiselect-dropdown .dropdown-list li {
  padding: 8px 10px !important;
}li.multiselect-item-checkbox div {
  line-height: 20px !important;
}/* ============================================================
   Column Preferences modal — Phase 2.4 scoped layout
   Wraps .ph2-modal-body content with a 2-column grid + scrollable
   panel-list pattern. Lock-icon vs ×-button per-row visual is
   driven by isColumnLocked() (4-key always-on guard:
   id / name / phone / email).

   Replaces the 363-line dead .cp-* block from commits 3708cf2cf +
   037da9ea4 — those classes were never adopted by the HTML and
   are removed in Phase 2.4.

   Header / footer / button visuals come from the shared
   .ph2-modal-* design system; this block only adds patterns
   genuinely unique to the column-list (panel grid, drag handle,
   custom checkbox, lock icon, search-input prefix).
   ============================================================ */#columnPreferenceModal {
  --ph2-modal-width: 940px;
}#columnPreferenceModal .cp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}#columnPreferenceModal .cp-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}#columnPreferenceModal .cp-panel-title {
  margin: 0 0 10px;
  font: 700 11px var(--my-font);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--blue);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
}#columnPreferenceModal .cp-panel-count {
  color: var(--dark-grey);
  font-weight: 700;
}#columnPreferenceModal .cp-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
  max-height: 360px;
  overflow-y: auto;
  padding: 2px;
}#columnPreferenceModal .cp-list::-webkit-scrollbar {
  width: 6px;
}#columnPreferenceModal .cp-list::-webkit-scrollbar-track {
  background: transparent;
}#columnPreferenceModal .cp-list::-webkit-scrollbar-thumb {
  background: var(--blue-light-2);
  border-radius: 3px;
}#columnPreferenceModal .cp-list::-webkit-scrollbar-thumb:hover {
  background: var(--blue-light-3);
}#columnPreferenceModal .cp-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: #f7f9fb;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  color: #2d3a48;
  margin: 0;
  -webkit-transition: background 0.12s ease, border-color 0.12s ease;
  transition: background 0.12s ease, border-color 0.12s ease;
}#columnPreferenceModal .cp-row.cp-row-checkbox {
  background: transparent;
  padding: 7px 8px;
  cursor: pointer;
}#columnPreferenceModal .cp-row.cp-row-checkbox:hover {
  background: var(--lighter-grey);
}#columnPreferenceModal .cp-drag-handle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 14px;
  color: var(--light-grey);
  cursor: -webkit-grab;
  cursor: grab;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#columnPreferenceModal .cp-drag-handle:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}#columnPreferenceModal .cp-row-label {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}#columnPreferenceModal .cp-row-dismiss {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--light-grey);
  border-radius: 5px;
  cursor: pointer;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: background 0.12s ease, color 0.12s ease;
  transition: background 0.12s ease, color 0.12s ease;
}#columnPreferenceModal .cp-row-dismiss:hover {
  background: rgba(227, 68, 54, 0.10);
  color: var(--orange);
}#columnPreferenceModal .cp-lock-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--light-grey);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  cursor: help;
  -webkit-transition: color 0.12s ease;
  transition: color 0.12s ease;
}#columnPreferenceModal .cp-lock-icon:hover {
  color: var(--dark-grey);
}#columnPreferenceModal .cp-empty {
  padding: 12px;
  font-size: 12px;
  color: var(--light-grey);
  text-align: center;
  margin: 0;
}#columnPreferenceModal .cp-search {
  position: relative;
  margin-bottom: 8px;
}#columnPreferenceModal .cp-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: var(--dark-grey);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  pointer-events: none;
}#columnPreferenceModal .cp-search-input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 8px;
  padding: 0 12px 0 32px;
  font: 500 13px var(--my-font);
  color: #2d3a48;
  outline: none;
  -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}#columnPreferenceModal .cp-search-input:focus {
  border-color: var(--blue);
  -webkit-box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
          box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
}#columnPreferenceModal .cp-search-input::-webkit-input-placeholder {
  color: var(--light-grey);
}#columnPreferenceModal .cp-search-input::-moz-placeholder {
  color: var(--light-grey);
}#columnPreferenceModal .cp-search-input:-ms-input-placeholder {
  color: var(--light-grey);
}#columnPreferenceModal .cp-search-input::-ms-input-placeholder {
  color: var(--light-grey);
}#columnPreferenceModal .cp-search-input::placeholder {
  color: var(--light-grey);
}#columnPreferenceModal .cp-select-all {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  padding: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}#columnPreferenceModal .cp-select-all-label {
  font: 700 13px var(--my-font);
  color: var(--blue);
}#columnPreferenceModal .cp-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}#columnPreferenceModal .cp-checkbox-box {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid #c7cfd6;
  background: var(--white);
  color: transparent;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}#columnPreferenceModal .cp-checkbox:checked+.cp-checkbox-box {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}#columnPreferenceModal .cp-checkbox:disabled+.cp-checkbox-box {
  opacity: 0.5;
  background: #eef2f6;
}@media (max-width: 767px) {
  #columnPreferenceModal {
    --ph2-modal-width: 92vw;
  }

  #columnPreferenceModal .cp-grid {
    grid-template-columns: 1fr;
  }

  #columnPreferenceModal .cp-list {
    max-height: 280px;
  }
}/* ============================================================
   Quick View modals — Phase 2.5 scoped layout
   #addQuickViewModal (green-soft icon + plus glyph)
   #updateQuickViewModal (blue-soft icon + pencil glyph + Saved badge)
   Both share the same form patterns (.qv-*) so they're styled
   together; visual divergence lives in the .ph2-modal-icon-* tile
   chosen at the markup level.

   Migrated FROM legacy .right-popup slide-out + Bootstrap defaults
   TO .ph2-modal-* shared system. .right-popup definition is
   intentionally NOT touched — it's still used by call-action /
   re-shuffle / other slide-out modals elsewhere.
   ============================================================ */#addQuickViewModal,
#updateQuickViewModal {
  --ph2-modal-width: 480px;
}/* Field hint immediately under an input (e.g. "optional" copy) */#addQuickViewModal .qv-field-hint,
#updateQuickViewModal .qv-field-hint {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--dark-grey);
}/* "Saved" badge inline next to Update modal title */#updateQuickViewModal .qv-saved-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(35, 155, 120, 0.14);
  color: var(--green);
  font: 700 10px var(--my-font);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
  line-height: 1.4;
}/* Blue-soft info hint card — replaces grey parenthetical placeholder */#addQuickViewModal .qv-hint-box,
#updateQuickViewModal .qv-hint-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(33, 119, 255, 0.08);
  border: 1px solid rgba(33, 119, 255, 0.18);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--blue);
}#addQuickViewModal .qv-hint-box strong,
#updateQuickViewModal .qv-hint-box strong {
  font-weight: 700;
}#addQuickViewModal .qv-hint-icon,
#updateQuickViewModal .qv-hint-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: var(--blue);
  margin-top: 1px;
}/* Default-behaviour card — holds label + hint + switch */#addQuickViewModal .qv-toggle-row,
#updateQuickViewModal .qv-toggle-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
}#addQuickViewModal .qv-toggle-text,
#updateQuickViewModal .qv-toggle-text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}#addQuickViewModal .qv-toggle-label,
#updateQuickViewModal .qv-toggle-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #2d3a48;
  line-height: 1.3;
}#addQuickViewModal .qv-toggle-hint,
#updateQuickViewModal .qv-toggle-hint {
  display: block;
  font-size: 12px;
  color: var(--dark-grey);
  margin-top: 2px;
  line-height: 1.4;
}/* (Phase 2.5's .qv-switch was promoted to shared .ph2-switch in
   Phase 2.7; markup in this file's Quick View modals migrated in
   the same commit. See .ph2-switch definition above.) *//* ng-multiselect-dropdown — Phase 2 alignment for the
   assignQuickViewToUsers field. Mirrors the #callModal recipe at
   styles.css:1269. Selected-item chip styling is already global
   (styles.css:4-20) and inherits unchanged. */#addQuickViewModal .multiselect-dropdown .dropdown-btn {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  min-height: 40px;
  background: var(--white);
}#addQuickViewModal .multiselect-dropdown .dropdown-btn:focus,
#addQuickViewModal .multiselect-dropdown.is-focused .dropdown-btn {
  border-color: var(--blue) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08) !important;
          box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08) !important;
}#addQuickViewModal .multiselect-dropdown .dropdown-list {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  -webkit-box-shadow: 0 8px 24px rgba(15, 28, 50, 0.12) !important;
          box-shadow: 0 8px 24px rgba(15, 28, 50, 0.12) !important;
}#addQuickViewModal .multiselect-dropdown .dropdown-list li:hover {
  background: var(--lighter-grey);
}@media (max-width: 767px) {

  #addQuickViewModal,
  #updateQuickViewModal {
    --ph2-modal-width: 92vw;
  }
}/* ============================================================
   Add New Lead modal — Phase 2.7 scoped layout (.anl-*)
   2-column grid: 220px sticky side nav + scrollable section
   content. Sections are anchored by id="sec-*" so the side
   nav anchors and the IntersectionObserver scroll-spy in
   lead-search.component.ts target the same set of elements.
   Toggle switch + ghost button reused from .ph2-* shared
   primitives (promoted from Phase 2.5 in this commit).
   ============================================================ */#studentModal {
  --ph2-modal-width: 920px;
}#studentModal .anl-form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-height: calc(100vh - 112px);
}#studentModal .anl-header {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}#studentModal .anl-header-progress {
  margin-right: 44px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--lighter-grey);
  color: var(--mid-grey);
  font: 600 11.5px var(--my-font);
  letter-spacing: 0.2px;
  white-space: nowrap;
}#studentModal .anl-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: 0;
  background: #f7f9fb;
}/* Side nav */#studentModal .anl-nav {
  border-right: 1px solid var(--border);
  padding: 18px 12px;
  background: var(--white);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  -ms-flex-item-align: start;
      align-self: start;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}#studentModal .anl-nav-label {
  padding: 0 8px 8px;
  font: 700 10px var(--my-font);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--light-grey);
}#studentModal .anl-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
}#studentModal .anl-nav-item {
  margin: 0;
  padding: 0;
  list-style: none;
}#studentModal .anl-nav-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--mid-grey);
  font: 600 12.5px var(--my-font);
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: background 0.15s ease, color 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease;
}#studentModal .anl-nav-link:hover {
  background: var(--lighter-grey);
  color: var(--blue);
  text-decoration: none;
}#studentModal .anl-nav-item.active .anl-nav-link {
  background: var(--blue);
  color: var(--white);
}#studentModal .anl-nav-item.active .anl-nav-num {
  background: var(--white);
  color: var(--blue);
}#studentModal .anl-nav-item.completed .anl-nav-link {
  color: #2d3a48;
}#studentModal .anl-nav-item.completed.active .anl-nav-link {
  color: var(--white);
}#studentModal .anl-nav-num {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lighter-grey);
  color: var(--mid-grey);
  font: 700 11px var(--my-font);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#studentModal .anl-nav-check {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#studentModal .anl-nav-text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}#studentModal .anl-nav-required-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#studentModal .anl-nav-item.active .anl-nav-required-dot,
#studentModal .anl-nav-item.completed .anl-nav-required-dot {
  display: none;
}/* Scroll content */#studentModal .anl-scroll {
  padding: 18px 22px 22px;
  overflow-y: auto;
  scroll-behavior: smooth;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 14px;
}#studentModal .anl-scroll::-webkit-scrollbar {
  width: 6px;
}#studentModal .anl-scroll::-webkit-scrollbar-track {
  background: transparent;
}#studentModal .anl-scroll::-webkit-scrollbar-thumb {
  background: var(--blue-light-2);
  border-radius: 3px;
}#studentModal .anl-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--blue-light-3);
}/* Section card */#studentModal .anl-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  scroll-margin-top: 12px;
}#studentModal .anl-section-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
}#studentModal .anl-section-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(20, 69, 113, 0.10);
  color: var(--blue);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#studentModal .anl-section-titlewrap {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}#studentModal .anl-section-title {
  margin: 0 0 2px;
  font: 700 14px var(--my-font);
  color: var(--blue);
}#studentModal .anl-section-subtitle {
  margin: 0;
  font: 500 12px var(--my-font);
  color: var(--dark-grey);
}/* Field grid */#studentModal .anl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}#studentModal .anl-grid-full {
  grid-column: 1 / -1;
}#studentModal .anl-form-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5px;
  min-width: 0;
}#studentModal .anl-form-label {
  margin: 0;
  font: 700 10.5px var(--my-font);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--dark-grey);
}#studentModal .anl-form-required {
  color: var(--orange);
  margin-left: 2px;
}#studentModal .anl-form-input,
#studentModal .anl-form-select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: #2d3a48;
  font: 500 13px var(--my-font);
  outline: none;
  -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}#studentModal .anl-form-input:focus,
#studentModal .anl-form-select:focus {
  border-color: var(--blue);
  -webkit-box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
          box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
}#studentModal .anl-form-input::-webkit-input-placeholder {
  color: var(--light-grey);
}#studentModal .anl-form-input::-moz-placeholder {
  color: var(--light-grey);
}#studentModal .anl-form-input:-ms-input-placeholder {
  color: var(--light-grey);
}#studentModal .anl-form-input::-ms-input-placeholder {
  color: var(--light-grey);
}#studentModal .anl-form-input::placeholder {
  color: var(--light-grey);
}#studentModal .anl-form-input.is-invalid,
#studentModal .anl-form-select.is-invalid {
  border-color: var(--orange);
  -webkit-box-shadow: 0 0 0 3px rgba(227, 68, 54, 0.10);
          box-shadow: 0 0 0 3px rgba(227, 68, 54, 0.10);
}#studentModal .anl-form-select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%238395a7' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}/* Phone input with integrated CC chip */#studentModal .anl-phone {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
  -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}#studentModal .anl-phone:focus-within {
  border-color: var(--blue);
  -webkit-box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
          box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
}#studentModal .anl-phone.is-invalid {
  border-color: var(--orange);
  -webkit-box-shadow: 0 0 0 3px rgba(227, 68, 54, 0.10);
          box-shadow: 0 0 0 3px rgba(227, 68, 54, 0.10);
}#studentModal .anl-phone-cc {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 0 10px 0 10px;
  border-right: 1px solid var(--border);
  background: var(--lighter-grey);
  color: #2d3a48;
  font: 600 12.5px var(--my-font);
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#studentModal .anl-phone-cc-flag {
  display: inline-block;
  width: 16px;
  height: 11px;
  border-radius: 1.5px;
  background: -webkit-gradient(linear, left top, left bottom, from(#ff9933), color-stop(33.3%, #ff9933), color-stop(33.3%, #fff), color-stop(66.6%, #fff), color-stop(66.6%, #138808), to(#138808));
  background: linear-gradient(to bottom, #ff9933 0%, #ff9933 33.3%, #fff 33.3%, #fff 66.6%, #138808 66.6%, #138808 100%);
  border: 1px solid rgba(15, 28, 50, 0.12);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#studentModal .anl-phone-cc-code {
  line-height: 1;
}#studentModal .anl-phone-cc-chev {
  color: var(--mid-grey);
  height: 12px;
  width: 12px;
}#studentModal .anl-phone-input {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0 12px;
  background: transparent;
  font: 500 13px var(--my-font);
  color: #2d3a48;
  outline: none;
}#studentModal .anl-phone-input::-webkit-input-placeholder {
  color: var(--light-grey);
}#studentModal .anl-phone-input::-moz-placeholder {
  color: var(--light-grey);
}#studentModal .anl-phone-input:-ms-input-placeholder {
  color: var(--light-grey);
}#studentModal .anl-phone-input::-ms-input-placeholder {
  color: var(--light-grey);
}#studentModal .anl-phone-input::placeholder {
  color: var(--light-grey);
}/* Toggle row card (verification email) */#studentModal .anl-toggle-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(33, 119, 255, 0.06);
  border: 1px solid rgba(33, 119, 255, 0.15);
  border-radius: 10px;
}#studentModal .anl-toggle-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(20, 69, 113, 0.12);
  color: var(--blue);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#studentModal .anl-toggle-text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}#studentModal .anl-toggle-label {
  display: block;
  font: 700 13px var(--my-font);
  color: #2d3a48;
  line-height: 1.3;
}#studentModal .anl-toggle-hint {
  display: block;
  margin-top: 2px;
  font: 500 12px var(--my-font);
  color: var(--dark-grey);
  line-height: 1.4;
}/* Radio group inside custom-fields section */#studentModal .anl-radio-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
  padding: 6px 0;
}#studentModal .anl-radio {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  font: 600 12.5px var(--my-font);
  color: #2d3a48;
  cursor: pointer;
}#studentModal .anl-radio input {
  accent-color: var(--blue);
}/* Footer */#studentModal .anl-footer {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}#studentModal .anl-footer-left {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  font: 500 11.5px var(--my-font);
  color: var(--dark-grey);
}#studentModal .anl-footer-left strong {
  font-weight: 600;
}#studentModal .anl-footer-right {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}/* Validation messages — match the .anl-form-input visual language */#studentModal .invalid-fields {
  margin-top: 4px;
  font: 500 11.5px var(--my-font);
  color: var(--orange);
}/* ng-select internal overrides — scoped under #studentModal so they
   don't leak to other ng-select instances. Mirrors Phase 2.5's
   ng-multiselect overrides for #addQuickViewModal. The library is
   different (@ng-select/ng-select vs ng-multiselect-dropdown), so
   class names differ. */#studentModal .ng-select .ng-select-container {
  min-height: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-family: var(--my-font);
  font-size: 13px;
  color: #2d3a48;
}#studentModal .ng-select.ng-select-focused .ng-select-container,
#studentModal .ng-select.is-invalid .ng-select-container {
  -webkit-box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
          box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
  border-color: var(--blue);
}#studentModal .ng-select.is-invalid .ng-select-container {
  border-color: var(--orange);
  -webkit-box-shadow: 0 0 0 3px rgba(227, 68, 54, 0.10);
          box-shadow: 0 0 0 3px rgba(227, 68, 54, 0.10);
}#studentModal .ng-select .ng-placeholder {
  color: var(--light-grey);
}#studentModal .ng-dropdown-panel {
  border-radius: 10px;
  border: 1px solid var(--border);
  -webkit-box-shadow: 0 8px 24px rgba(15, 28, 50, 0.12);
          box-shadow: 0 8px 24px rgba(15, 28, 50, 0.12);
  margin-top: 4px;
}#studentModal .ng-dropdown-panel .ng-option {
  padding: 9px 12px;
  font: 500 13px var(--my-font);
  color: #2d3a48;
}#studentModal .ng-dropdown-panel .ng-option.ng-option-marked,
#studentModal .ng-dropdown-panel .ng-option:hover {
  background: var(--lighter-grey);
  color: var(--blue);
}#studentModal .ng-dropdown-panel .ng-option.ng-option-selected {
  background: var(--blue-light-1);
  color: var(--blue);
}/* Phase 2.7a — mobile responsive fixes.
   Phase 2.7 shipped a 767px breakpoint that collapsed the side nav
   into a horizontal pill grid at the top of the modal — it took ~30%
   of the vertical space and left footer buttons + required-fields
   hint wrapping awkwardly on narrow viewports.
   At <720px we now hide the side nav entirely (form scrolls naturally
   with section icons + titles as wayfinding), hide the
   "Save & Add Another" ghost button (power-user feature, desktop-only
   acceptable), and hide the "Fields marked * are required" hint
   (per-field asterisks are self-explanatory). Tighter padding for
   the footer / scroll / section keeps everything compact.
   At <540px field grids collapse to single-column for phone widths;
   tablet-portrait (540-720px) keeps the 2-column grid since fields
   stay readable.
   Phase 3 enhancement candidate: a horizontal pill scroll for
   section nav on mobile (currently hidden — section icons inside
   the scroll content provide enough wayfinding). */@media (max-width: 720px) {
  #studentModal {
    --ph2-modal-width: 96vw;
  }

  #studentModal .anl-body {
    grid-template-columns: 1fr;
  }

  #studentModal .anl-nav {
    display: none;
  }

  #studentModal .anl-footer-left {
    display: none;
  }

  #studentModal .anl-btn-ghost {
    display: none;
  }

  #studentModal .anl-footer {
    padding: 12px 16px;
  }

  #studentModal .anl-scroll {
    padding: 16px 18px 20px;
  }

  #studentModal .anl-section {
    padding: 16px 16px 4px;
  }

  #studentModal .anl-header-progress {
    display: none;
  }
}@media (max-width: 540px) {
  #studentModal .anl-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}/* ============================================================
   Filter modal — Phase 3.1.A shell migration (.fl-*)
   First of multi-commit Phase 3.1 series. Migrates the modal
   wrapper from legacy .right-popup + Bootstrap defaults to
   .ph2-modal-* shared system. The 4 sub-component bodies
   (lead-filter-basic / -stage / -source / -advanced) are NOT
   touched in this commit — Phase 3.1.B handles those. Tab
   navigation continues to use Bootstrap's data-toggle="tab" +
   data-target="#tab1..#tab4" plugin (existing pane ids preserved
   verbatim).
   ============================================================ */#filterModal {
  --ph2-drawer-width: 520px;
}/* ----- Drawer mode — Phase 3.1.E.1 -----
   Pure CSS conversion of the centered modal to a slide-in
   right drawer. Bootstrap modal plumbing (data-toggle triggers,
   id="closeModal" dismiss path, Phase 2.5a auto-dismiss helper,
   shown/hidden.bs.modal events, focus trap, ESC dismiss) is
   preserved verbatim — we only override positioning + animation
   geometry. Specificity: every override uses the `#filterModal`
   id, beating Bootstrap's class-based rules without `!important`.

   Key overrides:
     - .modal-dialog: position fixed right, full viewport
       height, drawer width via --ph2-drawer-width.
     - .modal.fade .modal-dialog: replace Bootstrap's
       translate(0, -25%) with translateX(100%) for slide-from-
       right, same 0.3s ease-out transition curve.
     - .modal.in .modal-dialog: translateX(0) for slid-in state.
     - .modal-content: full height, no border-radius (drawer
       has sharp edges).
     - Body shell collapses sidebar to horizontal pill scroll
       always (the 220px vertical nav doesn't fit at 520px
       drawer width). Reuses the rules previously gated by the
       Phase 3.1.A mobile @media; lifted unconditionally now
       since drawer is always narrow.
     - Backdrop opacity tightened to 0.4 (lighter feel for
       drawer pattern). Scoped via :has() so other modals'
       backdrops are unaffected. Older Safari < 15.4 falls
       back to Bootstrap's 0.5 default — graceful degradation.
*/#filterModal .modal-dialog,
#filterModal .modal-dialog.ph2-modal-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  width: var(--ph2-drawer-width);
  max-width: 100%;
  height: 100vh;
}#filterModal.modal.fade .modal-dialog {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}#filterModal.modal.in .modal-dialog {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}/* Lighter backdrop, scoped so only the filter drawer's backdrop
   gets it (other modals keep Bootstrap's 0.5 default). */body:has(#filterModal.in) .modal-backdrop.in {
  opacity: 0.4;
}/* ----- Search-across-filters bar — Phase 3.1.E.3 -----
   Sits between the drawer header and the .ph2-modal-body
   scroll container in the modal-content flex column, so it's
   naturally pinned above the scrolling body without needing
   `position: sticky`. Live-filters .fl-form-group visibility
   via .fl-hidden class toggle (set by onFilterSearchChange()
   in home.component.ts). Section auto-hide via .fl-section-hidden
   when all the section's fields are hidden. */#filterModal .fl-search-bar {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#filterModal .fl-search-bar-icon {
  position: absolute;
  left: 28px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: var(--mid-grey);
  pointer-events: none;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}#filterModal .fl-search-bar-input {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--lighter-grey);
  font: 500 13px var(--my-font);
  color: #2d3a48;
  outline: none;
  -webkit-transition: border-color 0.15s ease, background 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, background 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, -webkit-box-shadow 0.15s ease;
}#filterModal .fl-search-bar-input::-webkit-input-placeholder {
  color: var(--light-grey);
}#filterModal .fl-search-bar-input::-moz-placeholder {
  color: var(--light-grey);
}#filterModal .fl-search-bar-input:-ms-input-placeholder {
  color: var(--light-grey);
}#filterModal .fl-search-bar-input::-ms-input-placeholder {
  color: var(--light-grey);
}#filterModal .fl-search-bar-input::placeholder {
  color: var(--light-grey);
}#filterModal .fl-search-bar-input:focus {
  border-color: var(--blue);
  background: var(--white);
  -webkit-box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
          box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
}#filterModal .fl-search-bar-input::-webkit-search-cancel-button {
  display: none;
}#filterModal .fl-search-bar-clear {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--mid-grey);
  cursor: pointer;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: background 0.12s ease, color 0.12s ease;
  transition: background 0.12s ease, color 0.12s ease;
}#filterModal .fl-search-bar-clear:hover {
  background: rgba(227, 68, 54, 0.10);
  color: var(--orange);
}#filterModal .fl-search-bar-count {
  font: 600 11.5px var(--my-font);
  color: var(--dark-grey);
  white-space: nowrap;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}/* Filter visibility toggle — set by onFilterSearchChange() */#filterModal .fl-form-group.fl-hidden {
  display: none;
}#filterModal .fl-section.fl-section-hidden {
  display: none;
}/* Empty-state message inside .fl-stack when search has zero matches
   across all groups. Phase 3.1.E.2 — was previously a grid child of
   .fl-shell; now a flex child at the top of .fl-stack. */#filterModal .fl-search-empty {
  margin: 0;
  padding: 60px 20px;
  text-align: center;
  font: 500 13.5px var(--my-font);
  color: var(--mid-grey);
}#filterModal .ph2-modal-content {
  /* Drawer panel: full viewport height, sharp edges, no border-radius.
     Was max-height: calc(100vh - 80px) for centered modal margin —
     drawer occupies the full vertical space. */
  height: 100%;
  max-height: none;
  border-radius: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* Phase 3.1.E.2-fix — column-flex container needs min-height: 0
     so its children's implicit min-height: auto doesn't keep the
     body from shrinking below content size. Without this, the
     body refuses to clamp to 100% height in Chromium and content
     overflows past the footer instead of triggering the body's
     overflow-y: auto. The previous .fl-shell grid layout had
     this implicit via grid sizing; the .fl-stack flex column
     needs it declared. */
  min-height: 0;
}#filterModal .ph2-modal-header {
  /* Phase 3.1.E.2-fix — pin the header so the body's flex: 1
     calculation doesn't squeeze it. Search-bar and footer
     siblings already declared flex-shrink: 0; the header was
     relying on its natural content height (icon + title + close
     ≈ 80px) to stay put, which the grid layout previously
     enforced. Flex column doesn't enforce that — explicit pin
     restores the contract. */
  -ms-flex-negative: 0;
      flex-shrink: 0;
}/* Phase 3.1.E.6 — header counter "X filters selected across
   Y groups" subtitle variant. Inherits .ph2-modal-subtitle
   sizing/color; only the embedded numbers get blue weighted
   emphasis. */#filterModal .fl-header-counter strong {
  color: var(--blue, #144571);
  font-weight: 600;
}/* ----- Phase 3.1.E.8 — Tab strip (All Groups / Active /
   Saved Views / Recently Used) -----
   Pinned row below the drawer header (matches the pinning
   pattern of .fl-search-bar, .fl-saved-strip, .fl-footer).
   Horizontally scrolls on narrow viewports without showing a
   scrollbar so the pills don't truncate. */#filterModal .fl-tab-strip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}#filterModal .fl-tab-strip::-webkit-scrollbar {
  display: none;
}#filterModal .fl-tab-strip-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 500 12.5px var(--my-font);
  color: var(--mid-grey);
  cursor: pointer;
  white-space: nowrap;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: background 0.15s ease, color 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease;
}#filterModal .fl-tab-strip-item:hover {
  background: var(--lighter-grey);
  color: var(--blue, #144571);
}#filterModal .fl-tab-strip-item--active {
  background: var(--blue, #144571);
  color: var(--white);
  font-weight: 600;
}#filterModal .fl-tab-strip-count {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: rgba(34, 139, 87, 0.14);
  color: var(--green, #228b57);
  border-radius: 999px;
  font: 600 10.5px var(--my-font);
}#filterModal .fl-tab-strip-item--active .fl-tab-strip-count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}/* Group visibility gate — Active tab hides groups with zero
   active filters; Saved/Recent tabs hide all groups via the
   .fl-stack *ngIf, but this class is belt-and-braces. */#filterModal .fl-group--tab-hidden {
  display: none;
}/* ----- Saved Views / Recently Used tab panes -----
   When activeFilterTab is 'saved' or 'recent', .fl-stack is
   *ngIf-gated off and one of these panes renders in its
   place. Same flex-child contract as .fl-stack: flex: 1 +
   min-height: 0 + overflow-y: auto so the list scrolls
   independently between the pinned tab strip and footer. */#filterModal .ph2-modal-body.fl-tab-pane {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 16px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--lighter-grey);
}#filterModal .ph2-modal-body.fl-tab-pane::-webkit-scrollbar {
  width: 6px;
}#filterModal .ph2-modal-body.fl-tab-pane::-webkit-scrollbar-thumb {
  background: var(--blue-light-2);
  border-radius: 3px;
}#filterModal .ph2-modal-body.fl-tab-pane::-webkit-scrollbar-track {
  background: transparent;
}#filterModal .fl-tab-pane-heading {
  margin: 0 0 12px;
  font: 700 11px var(--my-font);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mid-grey);
}#filterModal .fl-saved-list-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}#filterModal .fl-saved-list-item:hover {
  border-color: var(--blue, #144571);
}#filterModal .fl-saved-list-item--active {
  border-color: var(--blue, #144571);
  -webkit-box-shadow: inset 3px 0 0 0 var(--blue, #144571);
          box-shadow: inset 3px 0 0 0 var(--blue, #144571);
}#filterModal .fl-saved-list-name {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  font: 500 13.5px var(--my-font);
  color: var(--blue, #144571);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}#filterModal .fl-saved-list-name:hover {
  text-decoration: underline;
}#filterModal .fl-saved-list-meta {
  font: 400 11.5px var(--my-font);
  color: var(--light-grey, #98a2b3);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  white-space: nowrap;
}#filterModal .fl-saved-list-delete {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  font-size: 14px;
  line-height: 1;
  color: var(--mid-grey);
  cursor: pointer;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: background 0.12s ease, color 0.12s ease;
  transition: background 0.12s ease, color 0.12s ease;
}#filterModal .fl-saved-list-delete:hover {
  background: rgba(217, 119, 6, 0.12);
  color: var(--orange, #d97706);
}#filterModal .fl-empty-state {
  text-align: center;
  padding: 30px 20px;
  color: var(--mid-grey);
  font: italic 13px var(--my-font);
  margin: 0;
}@media (max-width: 720px) {
  #filterModal .fl-tab-strip {
    padding: 6px 12px;
  }

  #filterModal .fl-tab-strip-item {
    padding: 5px 10px;
    font-size: 12px;
  }

  #filterModal .ph2-modal-body.fl-tab-pane {
    padding: 12px;
  }
}/* ----- Phase 3.1.E.5 — Quick Recall saved-sets strip -----
   Sits between the search bar and the .fl-stack collapsible
   groups. flex-shrink: 0 pins it (matches the pinning pattern
   used by .fl-search-bar and .fl-footer). Wraps to a second
   row on narrow viewports. */#filterModal .fl-saved-strip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}#filterModal .fl-saved-label {
  font: 700 10.5px var(--my-font);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mid-grey);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#filterModal .fl-saved-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}#filterModal .fl-saved-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  font: 500 12px var(--my-font);
  color: var(--text-primary, #1a1f36);
  cursor: pointer;
  -webkit-transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}#filterModal .fl-saved-pill:hover {
  border-color: var(--blue, #144571);
  background: rgba(20, 69, 113, 0.06);
}#filterModal .fl-saved-pill--active {
  border-color: var(--blue, #144571);
  background: rgba(20, 69, 113, 0.10);
  color: var(--blue, #144571);
  font-weight: 600;
}#filterModal .fl-saved-pill-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}#filterModal .fl-saved-pill-delete {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--mid-grey);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: background 0.12s ease, color 0.12s ease;
  transition: background 0.12s ease, color 0.12s ease;
}#filterModal .fl-saved-pill-delete:hover {
  background: rgba(217, 119, 6, 0.12);
  color: var(--orange, #d97706);
}#filterModal .fl-saved-empty {
  font: italic 11.5px var(--my-font);
  color: var(--mid-grey);
}#filterModal .fl-saved-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#filterModal .fl-saved-add {
  font: 600 11.5px var(--my-font);
  color: var(--blue, #144571);
  background: transparent;
  border: 1px dashed var(--blue, #144571);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}#filterModal .fl-saved-add:hover:not(:disabled) {
  background: rgba(20, 69, 113, 0.08);
}#filterModal .fl-saved-add:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}#filterModal .fl-saved-input {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
}#filterModal .fl-saved-input input {
  width: 180px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  font: 500 12px var(--my-font);
  color: var(--text-primary, #1a1f36);
  outline: none;
  -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}#filterModal .fl-saved-input input:focus {
  border-color: var(--blue, #144571);
  -webkit-box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
          box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
}#filterModal .fl-saved-confirm,
#filterModal .fl-saved-cancel {
  font: 600 11.5px var(--my-font);
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid var(--border);
  -webkit-transition: background 0.15s ease, border-color 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease;
}#filterModal .fl-saved-confirm {
  background: var(--blue, #144571);
  color: var(--white);
  border-color: var(--blue, #144571);
}#filterModal .fl-saved-confirm:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}#filterModal .fl-saved-cancel {
  background: var(--white);
  color: var(--mid-grey);
}#filterModal .fl-saved-cancel:hover {
  background: var(--lighter-grey);
}@media (max-width: 720px) {
  #filterModal .fl-saved-strip {
    padding: 8px 12px;
    gap: 8px;
  }

  #filterModal .fl-saved-input input {
    width: 130px;
  }

  #filterModal .fl-saved-pill-name {
    max-width: 110px;
  }
}/* Phase 3.1.E.2 — .fl-stack replaces .fl-shell. Single scrollable
   column of collapsible group cards. Removed the 4-tab navigation
   entirely; each sub-component lives inside one .fl-group. */#filterModal .ph2-modal-body.fl-stack {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
  padding: 14px 16px 18px;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--lighter-grey);
}#filterModal .ph2-modal-body.fl-stack::-webkit-scrollbar {
  width: 6px;
}#filterModal .ph2-modal-body.fl-stack::-webkit-scrollbar-track {
  background: transparent;
}#filterModal .ph2-modal-body.fl-stack::-webkit-scrollbar-thumb {
  background: var(--blue-light-2);
  border-radius: 3px;
}#filterModal .ph2-modal-body.fl-stack::-webkit-scrollbar-thumb:hover {
  background: var(--blue-light-3);
}/* ----- Phase 3.1.E.2 — Collapsible group card primitives -----
   Each .fl-group is one row in the .fl-stack: a clickable head
   (icon + title + count badge + reset link + chevron) and a
   body that hosts a sub-component. Expanded/collapsed state is
   driven by [class.fl-group--expanded] in the template (via
   filterGroupExpanded[group]); the body is gated by [hidden]
   so screen-readers + Angular both treat collapsed bodies as
   absent. */#filterModal .fl-group {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
  -webkit-transition: -webkit-box-shadow 0.15s ease;
  transition: -webkit-box-shadow 0.15s ease;
  transition: box-shadow 0.15s ease;
  transition: box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}#filterModal .fl-group--has-active {
  /* Left blue accent bar — highlights groups that contain
     user-set filters so they're easy to spot in a long stack. */
  -webkit-box-shadow: inset 3px 0 0 0 var(--blue, #144571);
          box-shadow: inset 3px 0 0 0 var(--blue, #144571);
}#filterModal .fl-group.fl-hidden {
  display: none;
}#filterModal .fl-group-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text-primary, #1a1f36);
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}#filterModal .fl-group-head:hover {
  background: var(--lighter-grey);
}#filterModal .fl-group-head:focus {
  outline: none;
  background: var(--lighter-grey);
}#filterModal .fl-group-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(20, 69, 113, 0.10);
  color: var(--blue, #144571);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#filterModal .fl-group-titlewrap {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
}#filterModal .fl-group-title {
  font: 600 14px var(--my-font);
  color: var(--text-primary, #1a1f36);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}/* Phase 3.1.E.7 — preview line under group title showing the
   currently-selected values when collapsed. ellipsis-truncates
   if the joined text exceeds the available width; works with
   the .fl-group-titlewrap min-width: 0 + flex: 1 already in
   place since E.2. */#filterModal .fl-group-preview {
  font: 400 11.5px var(--my-font);
  color: var(--mid-grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}@media (max-width: 480px) {
  #filterModal .fl-group-preview {
    font-size: 11px;
  }
}#filterModal .fl-group-count {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(34, 139, 87, 0.12);
  color: var(--green, #228b57);
  font: 600 12px var(--my-font);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#filterModal .fl-group-reset {
  font: 600 12px var(--my-font);
  color: var(--blue, #144571);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: color 0.15s ease, background 0.15s ease;
  transition: color 0.15s ease, background 0.15s ease;
}#filterModal .fl-group-reset:hover {
  color: var(--orange, #d97706);
  background: rgba(217, 119, 6, 0.08);
}#filterModal .fl-group-chevron {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--mid-grey);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}#filterModal .fl-group--expanded .fl-group-chevron {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}#filterModal .fl-group-body {
  padding: 6px 16px 16px;
  border-top: 1px solid var(--border);
  background: var(--lighter-grey);
}/* Mobile: tighten group head padding so reset + count + chevron
   don't crowd at narrow widths. */@media (max-width: 480px) {
  #filterModal .ph2-modal-body.fl-stack {
    padding: 10px 10px 14px;
  }

  #filterModal .fl-group-head {
    padding: 10px 12px;
    gap: 8px;
  }

  #filterModal .fl-group-body {
    padding: 6px 12px 12px;
  }

  #filterModal .fl-group-reset {
    padding: 3px 6px;
    font-size: 11.5px;
  }
}#filterModal .fl-footer.ph2-modal-footer {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* Phase 3.1.E.4 — push the count chip to the left and the
     button cluster to the right. The existing ph2-modal-footer
     uses flex with end-justified children; overriding to
     space-between lets the new .fl-footer-count occupy the left
     edge while Cancel/Reset/Search hug the right. */
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}/* Phase 3.1.E.4 — Live count "X leads match" chip in the footer.
   Sits at the left edge; pulses while a count-fetch is in flight;
   shows a "—" placeholder on error. Hidden in Re-Shuffle mode
   via *ngIf in the template. */#filterModal .fl-footer-count {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--blue-light-1, rgba(20, 69, 113, 0.06));
  border: 1px solid var(--border, #e0e6ed);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  color: var(--text-secondary, #4a5568);
  white-space: nowrap;
}#filterModal .fl-footer-count-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue, #144571);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#filterModal .fl-footer-count-dot-loading {
  -webkit-animation: fl-footer-count-pulse 1s ease-in-out infinite;
          animation: fl-footer-count-pulse 1s ease-in-out infinite;
}@-webkit-keyframes fl-footer-count-pulse {

  0%,
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }

  50% {
    opacity: 0.4;
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
}@keyframes fl-footer-count-pulse {

  0%,
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }

  50% {
    opacity: 0.4;
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
}#filterModal .fl-footer-count-text strong {
  color: var(--blue, #144571);
  font-weight: 600;
  margin-right: 2px;
}/* Phase 3.1.E.fix-3 — Mobile footer layout. At <540px the count
   chip + Cancel/Reset/Search row overflows, clipping Search at
   the right edge (user-reported regression). flex-wrap pushes
   the chip to its own row when it can't fit; flex-basis: 100%
   pins it to the full row width; chip centers in its row.
   Buttons share the next row, naturally distributed by the
   existing justify-content: space-between (which becomes the
   second-row layout once the chip wraps to row 1). */@media (max-width: 540px) {
  #filterModal .fl-footer.ph2-modal-footer {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    row-gap: 10px;
    padding: 12px 16px;
  }

  #filterModal .fl-footer-count {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 100%;
            flex: 1 0 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}/* ----- Section card primitives (Phase 3.1.B.1 — reusable across all 4
   tabs in the Phase 3.1.B series). Each tab body is a stack of
   .fl-section cards with a header (icon + title + subtitle), a
   2-column .fl-grid of fields, and per-field .fl-form-group wrappers.
   Mirrors the .anl-section pattern from Phase 2.7 but with a tighter
   filter-specific aesthetic. */#filterModal .fl-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
}#filterModal .fl-section:last-child {
  margin-bottom: 0;
}#filterModal .fl-section-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
}#filterModal .fl-section-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(20, 69, 113, 0.10);
  color: var(--blue);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#filterModal .fl-section-titlewrap {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}#filterModal .fl-section-title {
  margin: 0 0 2px;
  font: 700 13.5px var(--my-font);
  color: var(--blue);
}#filterModal .fl-section-subtitle {
  margin: 0;
  font: 500 11.5px var(--my-font);
  color: var(--dark-grey);
}#filterModal .fl-grid {
  /* Drawer mode: single column at all viewports (was 2-col 1fr 1fr
     in centered-modal layout). At 520px drawer width minus padding,
     2-col fields are too cramped. */
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 16px;
}#filterModal .fl-grid-full {
  grid-column: 1 / -1;
}#filterModal .fl-form-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5px;
  min-width: 0;
  position: relative;
}#filterModal .fl-form-label {
  margin: 0;
  font: 700 10.5px var(--my-font);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--dark-grey);
}#filterModal .fl-form-required {
  color: var(--orange);
  margin-left: 2px;
}#filterModal .fl-form-input,
#filterModal .fl-form-select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: #2d3a48;
  font: 500 13px var(--my-font);
  outline: none;
  -webkit-transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}#filterModal .fl-form-input:focus,
#filterModal .fl-form-select:focus {
  border-color: var(--blue);
  -webkit-box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
          box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
}#filterModal .fl-form-input::-webkit-input-placeholder {
  color: var(--light-grey);
}#filterModal .fl-form-input::-moz-placeholder {
  color: var(--light-grey);
}#filterModal .fl-form-input:-ms-input-placeholder {
  color: var(--light-grey);
}#filterModal .fl-form-input::-ms-input-placeholder {
  color: var(--light-grey);
}#filterModal .fl-form-input::placeholder {
  color: var(--light-grey);
}/* Daterangepicker input wrapper — keeps full width while preserving the
   library's overlay positioning. */#filterModal .fl-date-wrap {
  width: 100%;
}#filterModal .fl-date-wrap .datepicker {
  padding: 0;
}/* Compound row — operation-select + value-control side-by-side. Used by
   Stage tab's "Last Lead Stage At" / "Lead Stage Attempted Count" /
   "Lead Stage Date" fields. Generic enough to be reused for the
   Advanced tab's TAT triplets (operation+timeType+timeValue) in
   Phase 3.1.B.4 — the grid-template-columns rule there will extend to
   3 columns. */#filterModal .fl-compound-row {
  /* Drawer mode: single column at all viewports (was 140px / 1fr
     side-by-side). Operation select and value control stack
     vertically in the narrow drawer. */
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}#filterModal .fl-compound-op,
#filterModal .fl-compound-value {
  min-width: 0;
}#filterModal .fl-compound-value.fl-date-wrap .form-control,
#filterModal .fl-compound-value.fl-date-wrap input {
  width: 100%;
}/* Inline cross-field error message (shown via parent-driven flags
   like displayRecentLeadStageAtErrorMsg / displayLeadStageErrorMsg). */#filterModal .fl-error-msg {
  margin: 4px 0 0;
  font: 500 11.5px var(--my-font);
  color: var(--orange);
}/* Search input — text field with an inline right-side icon button
   that triggers a quick-submit. Phase 3.1.B.4 added for the Basic
   tab's "Search Lead" field; generic enough for any other modal
   that wants an inline search-trigger affordance. */#filterModal .fl-search-input {
  position: relative;
}#filterModal .fl-search-input .fl-form-input {
  padding-right: 40px;
}#filterModal .fl-search-input-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--mid-grey);
  cursor: pointer;
  -webkit-transition: background 0.12s ease, color 0.12s ease;
  transition: background 0.12s ease, color 0.12s ease;
}#filterModal .fl-search-input-btn:hover {
  background: rgba(20, 69, 113, 0.08);
  color: var(--blue);
}/* ngxDaterangepickerMd overlay geometry — Phase 3.1.B-fix.
   The legacy custom.css:3380-3413 rules use `.datepicker` /
   `.datepicker.right` ancestor selectors as the hook that sets
   the picker overlay's `min-width: 662px` + right-edge anchoring.
   When Phase 3.1.B.2/.B.3/.B.4 wrapped date inputs in the new
   `.fl-compound-value` containers, that legacy class chain was
   dropped — overlays collapsed to default (narrow) width and
   appeared "not opening" on 7 of 9 fields. This block replays
   the same semantics for the new wrappers, scoped under
   #filterModal so it can't leak. Mirrors the original @media
   (min-width: 768px) gate so mobile picker behavior is
   unaffected. */@media (min-width: 768px) {

  #filterModal .fl-compound-value .md-drppicker.ltr,
  #filterModal .fl-date-wrap .md-drppicker.ltr {
    right: 0 !important;
    left: auto !important;
    /* Phase 3.1.E.1 drawer: min-width reduced from 662px (the
       legacy dual-month calendar width that fit a 920px centered
       modal) to 440px so the picker overlay fits within the
       520px drawer's compound-value cell. The library renders a
       single-month calendar at this width, which is tight but
       functional. If feedback flags it as cramped, escalate to
       a portal-mounted overlay (overlay appended to body, free
       to spill outside the drawer's left edge). */
    min-width: 440px;
  }
}/* 3-column compound — Phase 3.1.B.3 modifier extending .fl-compound-row
   to handle the Advanced tab's TAT triplets (operation + timeType +
   timeValue). All 3 columns shown on desktop; collapses to single
   column on mobile (mobile rule below). */#filterModal .fl-compound-row-3col {
  /* Drawer mode: TAT triplets stack vertically too (was 140 / 1fr / 1fr).
     Inherits single-column from .fl-compound-row above. */
  grid-template-columns: 1fr;
}/* Radio-group pill primitives — Phase 3.1.B.3. Used by the Advanced
   tab's Field Status (State / City / Course → Filled / Blank / Both)
   AND the Get Activity yes/no toggle inside Activity Options. The
   <label>parent + child <input> pattern eliminates the duplicate
   id="city-blank" collision and misaligned for= refs that lived in
   the pre-restyle template — radio behavior is driven natively by
   the wrapping label, not by id/for pairing. */#filterModal .fl-radio-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}#filterModal .fl-radio-option {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  font: 600 12.5px var(--my-font);
  color: var(--mid-grey);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}#filterModal .fl-radio-option:hover {
  background: var(--lighter-grey);
  border-color: var(--blue-light-2);
  color: var(--blue);
}#filterModal .fl-radio-option input[type='radio'] {
  margin: 0;
  width: 14px;
  height: 14px;
  accent-color: var(--blue);
  cursor: pointer;
}#filterModal .fl-radio-option:has(input[type='radio']:checked) {
  background: rgba(20, 69, 113, 0.10);
  border-color: var(--blue);
  color: var(--blue);
}/* ng-multiselect-dropdown internals scoped under #filterModal. Mirrors
   the Phase 2.5 #addQuickViewModal recipe so chips, dropdown panel,
   and search input stay visually consistent across all Phase 2/3
   modals. Selected-item chip styling is already global at
   styles.css:4-20 (blue-soft pill) and inherits unchanged here. */#filterModal .multiselect-dropdown .dropdown-btn {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  min-height: 38px;
  background: var(--white);
}#filterModal .multiselect-dropdown .dropdown-btn:focus,
#filterModal .multiselect-dropdown.is-focused .dropdown-btn {
  border-color: var(--blue) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08) !important;
          box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08) !important;
}#filterModal .multiselect-dropdown .dropdown-list {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  -webkit-box-shadow: 0 8px 24px rgba(15, 28, 50, 0.12) !important;
          box-shadow: 0 8px 24px rgba(15, 28, 50, 0.12) !important;
}#filterModal .multiselect-dropdown .dropdown-list li:hover {
  background: var(--lighter-grey);
}/* Selected-filter highlight — Phase 3.1.G UX cue.
   Populated filter fields show a blue label + small "•" dot
   suffix so users can scan the form and see at a glance which
   filters are active.

   Coverage via :has() — modern browsers only (Chrome / Edge /
   Firefox / Safari 15.4+). Older Safari < 15.4 and iOS Safari
   < 15.4 silently no-op (graceful degradation; the feature
   simply doesn't activate, no breakage).

   Three populated-state signatures detected:
     - Text + daterange inputs: `input:not(:placeholder-shown)`
       (the picker writes the formatted range into the input
       value, hiding the placeholder).
     - ng-multiselect-dropdown: chip selected → renders as
       `.dropdown-btn span.selected-item` (library default).
     - Radio groups: `.fl-radio-group:has(input:checked)`.

   Native <select> fields (~10 across the 4 tabs) are NOT
   covered — Angular doesn't reflect the `selected` attribute
   to the DOM, so :has() can't detect their non-empty state.
   Path C hybrid (per-field [class.has-value] binding) remains
   an additive follow-up if team feedback flags this gap. */#filterModal .fl-form-group:has(> input:not(:placeholder-shown):not([type='radio']))>.fl-form-label,
#filterModal .fl-form-group:has(.fl-search-input input:not(:placeholder-shown))>.fl-form-label,
#filterModal .fl-form-group:has(.fl-compound-value input:not(:placeholder-shown))>.fl-form-label,
#filterModal .fl-form-group:has(.fl-date-wrap input:not(:placeholder-shown))>.fl-form-label,
#filterModal .fl-form-group:has(.dropdown-btn span.selected-item)>.fl-form-label,
#filterModal .fl-form-group:has(.fl-radio-group input[type='radio']:checked)>.fl-form-label {
  color: var(--blue);
}#filterModal .fl-form-group:has(> input:not(:placeholder-shown):not([type='radio']))>.fl-form-label::after,
#filterModal .fl-form-group:has(.fl-search-input input:not(:placeholder-shown))>.fl-form-label::after,
#filterModal .fl-form-group:has(.fl-compound-value input:not(:placeholder-shown))>.fl-form-label::after,
#filterModal .fl-form-group:has(.fl-date-wrap input:not(:placeholder-shown))>.fl-form-label::after,
#filterModal .fl-form-group:has(.dropdown-btn span.selected-item)>.fl-form-label::after,
#filterModal .fl-form-group:has(.fl-radio-group input[type='radio']:checked)>.fl-form-label::after {
  content: '\2022';
  margin-left: 6px;
  color: var(--blue);
  font-size: 14px;
  line-height: 1;
}/* Mobile breakpoint — drawer takes over the full viewport.
   Phase 3.1.A's mobile block previously contained sidebar-collapse,
   pill-nav, single-column-grid, etc. — all of those are now
   applied unconditionally above (drawer mode is always narrow,
   so the rules ride at all viewport widths). The only mobile-
   specific behavior remaining is the width override: drawer
   becomes 100vw on phones for full-screen takeover. */@media (max-width: 720px) {
  #filterModal {
    --ph2-drawer-width: 100vw;
  }
}/* ============================================================
   Get College USP modal — global scope
   Same view-encapsulation escape as Column Preferences. Every
   selector scoped under #uspmodal so it doesn't leak out.
   The legacy `div#uspmodal { padding-right: 0 }` workaround
   stays in college-usp.component.css per Phase 2 spec.
   ============================================================ */#uspmodal .modal-usp {
  width: 90%;
  max-width: 880px;
}#uspmodal .usp-modal {
  border: 0 !important;
  border-radius: 14px !important;
  -webkit-box-shadow: 0 24px 60px rgba(20, 41, 71, 0.22), 0 4px 14px rgba(20, 41, 71, 0.08) !important;
          box-shadow: 0 24px 60px rgba(20, 41, 71, 0.22), 0 4px 14px rgba(20, 41, 71, 0.08) !important;
  background: var(--white);
  font-family: var(--my-font);
  padding: 0;
  overflow: hidden;
  display: block;
  width: 100%;
}#uspmodal .usp-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
}#uspmodal .usp-header-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 194, 60, 0.18);
  color: var(--pending);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 2px;
}#uspmodal .usp-title-block {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
}#uspmodal .usp-title {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.1px;
}#uspmodal .usp-subtitle {
  margin: 0;
  font-size: 11.5px;
  color: var(--dark-grey);
  font-weight: 500;
  line-height: 1.4;
}#uspmodal .usp-close {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--dark-grey);
  border-radius: 8px;
  cursor: pointer;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  text-decoration: none;
}#uspmodal .usp-close:hover {
  background: rgba(227, 68, 54, 0.10);
  color: var(--orange);
  border-color: rgba(227, 68, 54, 0.20);
  text-decoration: none;
}#uspmodal .usp-college-search {
  position: relative;
  margin: 16px 22px 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0 12px 0 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 42px;
}#uspmodal .usp-college-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  color: var(--dark-grey);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  pointer-events: none;
}/* ng-select inside the college search wrapper — was ::ng-deep in the
   component file; rewritten to direct selectors now that this stylesheet
   is global. */#uspmodal .usp-college-search .ng-select {
  width: 100%;
  border: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}#uspmodal .usp-college-search .ng-select .ng-select-container {
  border: 0;
  background: transparent;
  min-height: 38px;
  font-family: var(--my-font);
  font-size: 13px;
  color: #2d3a48;
}#uspmodal .usp-college-search .ng-select .ng-arrow-wrapper {
  display: none;
}#uspmodal .usp-tabs-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 16px;
  padding: 14px 22px 12px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}#uspmodal .usp-tabs {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}#uspmodal .usp-tab {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  background: var(--white);
  color: #2d3a48;
  border-radius: 8px;
  font-family: var(--my-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}#uspmodal .usp-tab:hover {
  background: #f7f9fb;
  border-color: var(--blue-light-2);
}#uspmodal .usp-tab.active {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}#uspmodal .usp-tab.usp-tab-orange.active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
}#uspmodal .usp-degree-filter {
  height: 36px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 8px;
  font-family: var(--my-font);
  font-size: 13px;
  color: #2d3a48;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M3 5l3 3 3-3' stroke='%238395a7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 10px;
  min-width: 200px;
  cursor: pointer;
}#uspmodal .usp-degree-filter:focus {
  outline: none;
  border-color: var(--green);
  -webkit-box-shadow: 0 0 0 3px rgba(35, 155, 120, 0.12);
          box-shadow: 0 0 0 3px rgba(35, 155, 120, 0.12);
}#uspmodal .usp-tab-content {
  padding: 0 22px;
}#uspmodal .usp-pane {
  width: 100%;
}#uspmodal .usp-table-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
  max-height: 50vh;
  overflow-y: auto;
}#uspmodal .usp-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--my-font);
  margin: 0;
}#uspmodal .usp-table thead th {
  background: #f8fafc;
  color: var(--dark-grey);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}#uspmodal .usp-table tbody td {
  padding: 14px;
  font-size: 13px;
  color: #2d3a48;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}#uspmodal .usp-table tbody tr:last-child td {
  border-bottom: 0;
}#uspmodal .usp-table tbody tr:hover td {
  background: #fafbfc;
}#uspmodal .usp-course-name {
  font-weight: 700;
  color: var(--blue);
  max-width: 240px;
}#uspmodal .usp-level-chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 32px;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: #eef2f6;
  color: var(--dark-grey);
}#uspmodal .usp-level-chip.ug {
  background: var(--blue-light-1);
  color: var(--blue);
}#uspmodal .usp-level-chip.pg {
  background: rgba(35, 155, 120, 0.14);
  color: var(--green);
}#uspmodal .usp-fee {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green);
  line-height: 1.2;
}#uspmodal .usp-fee-type {
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--dark-grey);
  font-weight: 500;
}#uspmodal .usp-empty {
  padding: 16px;
  text-align: center;
  color: var(--light-grey);
  font-size: 12.5px;
  margin: 0;
}#uspmodal .usp-rich {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font-size: 13.5px;
  color: #2d3a48;
  margin-bottom: 12px;
  max-height: 50vh;
  overflow-y: auto;
}#uspmodal .usp-rich:last-child {
  margin-bottom: 0;
}#uspmodal .usp-facility-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}#uspmodal .usp-facility-card {
  background: var(--blue-light-1);
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 7px;
  border: 1px solid var(--blue-light-2);
}#uspmodal .usp-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px;
  margin-top: 14px;
  border-top: 1px solid var(--border);
}#uspmodal .usp-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-family: var(--my-font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  -webkit-transition: background 0.12s ease, border-color 0.12s ease, -webkit-filter 0.12s ease;
  transition: background 0.12s ease, border-color 0.12s ease, -webkit-filter 0.12s ease;
  transition: filter 0.12s ease, background 0.12s ease, border-color 0.12s ease;
  transition: filter 0.12s ease, background 0.12s ease, border-color 0.12s ease, -webkit-filter 0.12s ease;
}#uspmodal .usp-btn-ghost {
  background: var(--white);
  color: #2d3a48;
  border-color: var(--border);
}#uspmodal .usp-btn-ghost:hover {
  background: #f7f9fb;
  border-color: var(--blue-light-2);
}#uspmodal .usp-btn-blue {
  background: var(--blue);
  color: var(--white);
}#uspmodal .usp-btn-blue:hover {
  -webkit-filter: brightness(1.08);
          filter: brightness(1.08);
}#uspmodal .usp-btn-green {
  background: var(--green);
  color: var(--white);
}#uspmodal .usp-btn-green:hover {
  -webkit-filter: brightness(1.08);
          filter: brightness(1.08);
}@media (max-width: 767px) {
  #uspmodal .modal-usp {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  #uspmodal .usp-modal {
    border-radius: 0 !important;
    height: 100vh;
    overflow-y: auto;
  }

  #uspmodal .usp-tabs-row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }

  #uspmodal .usp-degree-filter {
    width: 100%;
  }

  #uspmodal .usp-footer {
    padding: 14px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  #uspmodal .usp-table-wrap {
    max-height: none;
  }
}/* ============================================================
   Phase 2 deferred-cleanups backlog (track in Phase 3):

   1. Pagination CSS — 10 components hand-roll <ul class="pagination">
      and depend on legacy custom.css:1442-1503 rules. Migrate them
      to <app-pagination> (or the .ll-pagi-* shared markup) and then
      delete the legacy block. Leaving rules in place keeps those
      screens working.

   2. #callModal triplicate — <app-call-action> rendered in
      app.component.html, applicant-manager, and lead-nav-bar (3
      separate instances all sharing id="callModal"). Browsers tolerate
      duplicate ids but it's invalid HTML and Bootstrap's data-target
      finds the first match via querySelector. Refactor to a single
      app-level instance reading lead context from a service.
      TODOs at: app.component.html, applicant-manager.component.html,
      lead-nav-bar.component.html.
      Same duplicate-render pattern also affects #cafLink (rendered
      in home.component.html and lead-nav-bar.component.html — note
      the home copy uses onCollegeCAFSelect handler vs lead-nav-bar's
      onCollegeSelect). Both copies must stay in lockstep until
      consolidation.
      Same pattern again with #wpModal — <app-send-whatsapp-template>
      is rendered 3 times: home.component.html, lead-nav-bar, and
      lead-ai-analysis. Inputs differ slightly (LeadDetailsParentTochild
      sources from different parent state) but DOM id is identical.
      All 3 must stay in lockstep until consolidation.
      Same family caught Phase 2.7: id="studentModal" appears on TWO
      different components — the Add New Lead modal at
      lead-search.component.html:7 and the unrelated "Incoming
      Prospect Details" modal at student-details-modal.component.html:5
      (rendered via <app-student-details-modal> in
      common/footer/footer.component.html:75). Both render
      simultaneously when the home/leads route is active. Bootstrap
      data-target="#studentModal" lookup uses querySelector and
      returns first DOM match — current behavior is order-dependent.
      Consolidate or rename one of the two ids.

   3. #callHistory duplicate — <app-lead-conversion-history #history>
      rendered in home.component.html and lead-ai-analysis.component.html
      (2 instances, same id pattern). Same refactor as #2.
      TODOs at: home.component.html, lead-ai-analysis.component.html.

   4. Inline expand panel orphans — replaced by #leadDetailsModal in
      step 8c.1 but kept to avoid breaking unaudited callers:
        - toggleLeadDetail / hideLeadDetail methods (home.component.ts)
        - .lead-details-container CSS block (home.component.css)
      Safe to delete after a wider grep confirms no consumers.

   5. .ll-row-name duplicate declaration — defined twice in
      home.component.css (lines ~526 and ~1124). Same selector, same
      specificity; later wins for shared properties. Fragile to file
      reordering. Consolidate into one block.

   6. prospect* dead-write state — home.component.ts still sets
      prospectName / prospectEmail / prospectPhone in getLeadId.
      Proxy getters in lead-list-table.component.ts still expose them.
      Only consumer was the action-menu header (extracted to component
      in step 6, derived from [lead] input). Now dead-writes; safe to
      remove.

   7. showLeadMenu / hidePopup vanilla JS in assets/js/custom.js —
      still wired to the row-actions-menu trigger and overlay. Could be
      replaced by Angular state on RowActionsMenuComponent for cleaner
      lifecycle management.

   8. <app-recommandation-college> component — declared + exported
      in commonshare.module.ts but no longer rendered anywhere after
      Phase 2.3.6 (the #Shortlist modal now inlines its own accordion
      backed by Angular state). Safe to delete the component +
      remove from module after verifying no dynamic load paths.

   9. #Shortlist UX enhancement — keep modal open after save, refresh
      the interested list inline, clear toolbar selections. Currently
      modal closes on save (existing behavior preserved per Phase 2.3
      strict no-handler-change rule). Owner of this change should
      modify moveToShortList() to skip the close-shortlist click and
      instead refetch via getShortListedColleges(leadId).

  10. Course `message_status` red indicator — the legacy
      <app-recommandation-college> child surfaced course[0].message_status
      in red on the college header. The Phase 2.3.6 inline accordion
      drops it for cleaner styling. If counsellors flag it as missing,
      reintroduce as a small chip below the college name in .sl-card-head.

  11. Nested email + WhatsApp preview modals (#previewModal,
      #whatsAppreviewModal) inside #leadActivity — left in legacy
      .analytic-modal styling in Phase 2.3.7 to keep that commit
      focused on the timeline. They render the email body / WhatsApp
      template body via [innerHTML] and only need a header + close +
      content shell. Restyle to .ph2-modal-* design system.

  12. UTM Medium badge variant map in home.component.ts
      (REENQ_UTM_MEDIUM_VARIANT) — Phase 2.3.8 ships a reasonable
      default (paid mediums green, organic/referral grey, missed/failed
      amber) but is not data-driven. Validate against the live payload
      distribution and refine. Consider lifting the map to a service so
      it's also reusable by the timeline for OBD/IVR call sub-typing.

  13. Trigger badge .count-no in the leads table (next to college
      names — opens #recentReenquiredModal) currently green via
      var(--active). Phase 2.3.7 timeline maps re_enquired → AMBER.
      Consider switching the trigger badge to amber-soft so the
      visual cue matches the modal's amber header icon. Out of
      scope for the 2.3.8 modal-only restyle.

  14. Promote .la-stat / .la-empty / .la-tag-{color} (timeline) and
      the parallel .rrc-stat / .rrc-empty / .rrc-badge-{color}
      (re-enquiry list) to a shared .ph2-stat / .ph2-empty /
      .ph2-badge-{color} set in styles.css. Currently each modal
      redeclares these scoped under its own id. Worth promoting
      now that 2 modals share the pattern — would reduce 80+ lines.

  15. Ghost .modal.in class on dismissed modals. Phase 2.5a's
      auto-dismiss helper (home.component.ts:openBootstrapModal)
      observed that #templateModal — and possibly others — leaves
      the .in class on the DOM element after dismissal even though
      Bootstrap has set inline display:none and the plugin's
      isShown state is false. The helper currently sidesteps this
      via a `.modal.in:visible` selector (computed-display + non-
      zero dimensions filter excludes the ghost cleanly). Phase 3
      should investigate WHICH dismissal path leaves the class
      behind and WHY Bootstrap's hide cleanup doesn't strip it.
      Likely candidate: a chained data-dismiss + data-toggle
      interaction where the source modal's backdrop teardown was
      preempted by the target's open. Once root cause is fixed,
      the `:visible` filter can be relaxed back to plain
      `.modal.in` if desired — the safety net stays cheap either
      way, but a clean DOM state is preferable.

  16. fromControlName typo on the lead_verification_mail field at
      lead-search.component.html (Add New Lead modal, verification
      toggle inside the Assignment section). Angular's template
      parser silently ignores the misspelled directive, so the
      formControl binding never wires; a manual (change) handler
      with patchValue compensates and the field functions correctly,
      but the binding is half-cooked. Fix to formControlName +
      remove the redundant (change) handler when next revisiting
      Add Lead form. Deliberately preserved in Phase 2.7 per
      DECISION 9 (visual restyle commits don't touch unrelated
      business logic).

   Process lessons (do not run on .html, banked for the team):
     - `eslint --fix` on .html files corrupted home.component.html in
       step 8c.1 (recovered in fix 8c.1a). Use manual formatting only
       for Angular templates.
     - `==` vs `===` — project uses `==` widely in templates per
       legacy MySQL TINYINT 0/1 handling. ESLint's eqeqeq rule fires
       at most legacy lines; treat as pre-existing project style.
   ============================================================ *//* ============================================================
   PHASE 2 MODAL DESIGN SYSTEM (Phase 2.3.4a refactor).

   Shared base classes used across all Phase 2 / 2.3 modals.
   Each modal opts in by:
     1. Setting --ph2-modal-width on the outer <div class="modal" id="X">
     2. Adding .ph2-modal-dialog / .ph2-modal-content / etc. on the
        Bootstrap structural divs.
     3. Using <header class="ph2-modal-header"> with
        <span class="ph2-modal-icon ph2-modal-icon-{kind}">,
        <h2 class="ph2-modal-title">, <p class="ph2-modal-subtitle">,
        <a class="ph2-modal-close">.
     4. Body uses <div class="ph2-modal-body"> with
        <div class="ph2-form-group"><label class="ph2-form-label">
        and inputs/textareas wearing .ph2-form-input.
     5. Footer uses <footer class="ph2-modal-footer"> with
        <button class="ph2-btn ph2-btn-secondary|primary">.
   Modal-specific scoped overrides (#priorityModal .pri-card,
   #updateLead .ul-grid, #cafLink .caf-link-readonly, etc.) layer
   on top of the shared base for unique content.

   Earlier modals (#callModal, #callHistory, #leadDetailsModal —
   Phase 2 step 8a/8b/8c) keep their own per-modal classes for
   now; migrating them is a Phase 3 follow-up since they each
   have additional scoped behaviors that need careful audit.
   ============================================================ */.ph2-modal-dialog {
  width: var(--ph2-modal-width, 480px);
  max-width: 92vw;
  margin: 56px auto;
}.ph2-modal-content {
  border-radius: 16px;
  border: none;
  -webkit-box-shadow: 0 12px 48px rgba(15, 28, 50, 0.18);
          box-shadow: 0 12px 48px rgba(15, 28, 50, 0.18);
  padding: 0;
  overflow: hidden;
}/* ----- Header ----- */.ph2-modal-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}.ph2-modal-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}.ph2-modal-icon svg {
  width: 18px;
  height: 18px;
}.ph2-modal-icon-blue {
  background: rgba(20, 69, 113, 0.10);
  color: var(--blue);
}.ph2-modal-icon-green {
  background: rgba(35, 155, 120, 0.12);
  color: var(--green);
}.ph2-modal-icon-red {
  background: rgba(227, 68, 54, 0.10);
  color: var(--orange);
}.ph2-modal-icon-amber {
  background: rgba(242, 147, 57, 0.14);
  color: var(--pending);
}/* When a kind tile uses a filled glyph (star, dot), opt-in to
   `fill: currentColor` via .ph2-modal-icon-filled on the inner svg. */.ph2-modal-icon .ph2-modal-icon-filled {
  fill: currentColor;
  stroke: none;
}.ph2-modal-header-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}.ph2-modal-title {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: #2d3a48;
}.ph2-modal-subtitle {
  margin: 0;
  font-size: 12.5px;
  color: var(--dark-grey);
}.ph2-modal-subtitle strong {
  color: var(--blue);
  font-weight: 600;
}.ph2-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(15, 28, 50, 0.06);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--dark-grey);
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: background 0.15s ease, color 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease;
}.ph2-modal-close:hover {
  background: rgba(15, 28, 50, 0.12);
  color: var(--blue);
}.ph2-modal-close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}/* ----- Body ----- */.ph2-modal-body {
  padding: 18px 24px 22px;
  background: #f7f9fb;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 14px;
}/* ----- Form primitives ----- */.ph2-form-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
}.ph2-form-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--dark-grey);
  margin: 0;
}.ph2-form-required {
  color: var(--orange);
  margin-left: 2px;
}.ph2-form-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #2d3a48;
  background: var(--white);
  font-family: var(--my-font);
  -webkit-transition: border-color 0.12s ease, -webkit-box-shadow 0.12s ease;
  transition: border-color 0.12s ease, -webkit-box-shadow 0.12s ease;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, -webkit-box-shadow 0.12s ease;
}.ph2-form-input:focus {
  outline: none;
  border-color: var(--blue);
  -webkit-box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
          box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
}.ph2-form-textarea {
  min-height: 80px;
  resize: vertical;
}.ph2-form-error {
  font-size: 11.5px;
  color: var(--orange);
  margin-top: 2px;
}/* ----- Footer ----- */.ph2-modal-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: #fafbfc;
}.ph2-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  -webkit-transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}.ph2-btn-secondary {
  background: var(--white);
  color: var(--dark-grey);
  border: 1px solid var(--border);
}.ph2-btn-secondary:hover {
  background: #f5f7fa;
  color: var(--blue);
  border-color: var(--blue-light-1);
}.ph2-btn-primary {
  background: var(--green);
  color: var(--white);
}.ph2-btn-primary:hover:not([disabled]) {
  background: #1f8a6a;
}.ph2-btn-primary[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}/* Navy filled — secondary primary action when a green primary is
   already on the row (introduced Phase 2.4 for Column Preferences:
   Save as Quick View vs Update Current View). Reusable. */.ph2-btn-navy {
  background: var(--blue);
  color: var(--white);
}.ph2-btn-navy:hover:not([disabled]) {
  background: #0f3257;
}.ph2-btn-navy[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}/* Ghost — transparent tertiary action that sits between secondary
   (outlined) and primary (filled). Introduced Phase 2.7 for the
   Add New Lead modal's "Save & Add Another" footer button; reusable
   anywhere a third action needs less visual weight than the primary. */.ph2-btn-ghost {
  background: transparent;
  color: #2d3a48;
  border: 1px solid transparent;
}.ph2-btn-ghost:hover:not([disabled]) {
  background: var(--lighter-grey);
  color: var(--blue);
}.ph2-btn-ghost[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}/* ============================================================
   Toggle switch — shared Phase 2 design system primitive.
   Promoted from Phase 2.5's #addQuickViewModal/#updateQuickViewModal
   .qv-switch in Phase 2.7 to avoid duplication when the Add New Lead
   modal needed the same toggle. .qv-switch references in the Quick
   View modals migrated in the same commit; the .qv-switch class is
   no longer defined.
   ============================================================ */.ph2-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  cursor: pointer;
}.ph2-switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}.ph2-switch-track {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #c7cfd6;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}.ph2-switch-track::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  -webkit-box-shadow: 0 1px 3px rgba(15, 28, 50, 0.22);
          box-shadow: 0 1px 3px rgba(15, 28, 50, 0.22);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}.ph2-switch input:checked+.ph2-switch-track {
  background: var(--green);
}.ph2-switch input:checked+.ph2-switch-track::before {
  -webkit-transform: translateX(16px);
          transform: translateX(16px);
}.ph2-switch input:focus-visible+.ph2-switch-track {
  -webkit-box-shadow: 0 0 0 3px rgba(35, 155, 120, 0.18);
          box-shadow: 0 0 0 3px rgba(35, 155, 120, 0.18);
}.ph2-btn-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}@media (max-width: 540px) {
  .ph2-modal-dialog {
    margin: 24px auto;
  }

  .ph2-modal-header,
  .ph2-modal-body,
  .ph2-modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
}/* ============================================================
   Add Lead Stage Modal (#callModal) — Phase 2 step 8a.
   Scoped under the modal id so styles cannot leak to other modals.
   Bootstrap appends modals to <body> at runtime, breaking Angular
   ViewEncapsulation; that is why this lives in the global styles.css
   rather than the call-action component's CSS. Theme tokens only.
   ============================================================ */#callModal .modal-dialog {
  width: 480px;
  max-width: 92vw;
  margin: 64px auto;
}#callModal .modal-content {
  border-radius: 16px;
  border: none;
  -webkit-box-shadow: 0 12px 48px rgba(15, 28, 50, 0.18);
          box-shadow: 0 12px 48px rgba(15, 28, 50, 0.18);
  padding: 0;
  overflow: hidden;
}/* ----- Header ----- */#callModal .cm-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}#callModal .cm-header-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(227, 68, 54, 0.10);
  color: var(--orange);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#callModal .cm-header-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  stroke: none;
}#callModal .cm-header-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}#callModal .cm-title {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: #2d3a48;
}#callModal .cm-subtitle {
  margin: 0;
  font-size: 12.5px;
  color: var(--dark-grey);
}#callModal .cm-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(15, 28, 50, 0.06);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--dark-grey);
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: background 0.15s ease, color 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease;
}#callModal .cm-close:hover {
  background: rgba(15, 28, 50, 0.12);
  color: var(--blue);
}#callModal .cm-close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}/* ----- Body ----- */#callModal .cm-body {
  padding: 20px 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 14px;
}#callModal .cm-body .form-group {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
}#callModal .cm-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--dark-grey);
  margin: 0;
}#callModal .cm-required {
  color: var(--orange);
  margin-left: 2px;
}#callModal .cm-body .form-control,
#callModal .cm-body select.form-control,
#callModal .cm-body textarea.form-control,
#callModal .cm-body input[type="file"],
#callModal .cm-body input[type="text"],
#callModal .cm-body input.dateTimePicker {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: #2d3a48;
  background: var(--white);
  -webkit-transition: border-color 0.12s ease, -webkit-box-shadow 0.12s ease;
  transition: border-color 0.12s ease, -webkit-box-shadow 0.12s ease;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, -webkit-box-shadow 0.12s ease;
}#callModal .cm-body .form-control:focus,
#callModal .cm-body select.form-control:focus,
#callModal .cm-body textarea.form-control:focus {
  outline: none;
  border-color: var(--blue);
  -webkit-box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
          box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
}#callModal .cm-body textarea.form-control {
  min-height: 80px;
  resize: vertical;
}/* ng-multiselect-dropdown overrides — match the new bordered look */#callModal .cm-body .multiselect-dropdown .dropdown-btn {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  min-height: 40px;
}#callModal .cm-body .multiselect-dropdown .dropdown-btn:focus,
#callModal .cm-body .multiselect-dropdown.is-focused .dropdown-btn {
  border-color: var(--blue) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08) !important;
          box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08) !important;
}#callModal .cm-checkbox-row {
  margin-top: 4px;
}#callModal .cm-checkbox {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #2d3a48;
  cursor: pointer;
}#callModal .cm-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
}#callModal .invalid-feedback {
  display: block;
  color: var(--orange);
  font-size: 11.5px;
  margin-top: 4px;
}/* ----- Footer ----- */#callModal .cm-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: #fafbfc;
  margin: 0;
}#callModal .cm-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  -webkit-transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}#callModal .cm-btn-secondary {
  background: var(--white);
  color: var(--dark-grey);
  border: 1px solid var(--border);
}#callModal .cm-btn-secondary:hover {
  background: #f5f7fa;
  color: var(--blue);
  border-color: var(--blue-light-1);
}#callModal .cm-btn-primary {
  background: var(--green);
  color: var(--white);
}#callModal .cm-btn-primary:hover:not([disabled]) {
  background: #1f8a6a;
}#callModal .cm-btn-primary[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}#callModal .cm-btn-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}/* Pending-followup block stays with its existing legacy styling.
   Only the wrapper margin is nudged so the block sits below the
   footer rather than the form-btn area. */#callModal .lead-table.custom {
  margin: 0 24px 24px;
}@media (max-width: 540px) {
  #callModal .modal-dialog {
    margin: 24px auto;
  }

  #callModal .cm-header,
  #callModal .cm-body,
  #callModal .cm-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
}/* ============================================================
   Conversation History Modal (#callHistory) — Phase 2 step 8b.
   Scoped under #callHistory so styles cannot leak. Same global-
   styles rationale as #callModal: Bootstrap appends modals to
   <body>, breaking Angular ViewEncapsulation. Theme tokens only.
   ============================================================ */#callHistory .modal-dialog {
  width: 540px;
  max-width: 92vw;
  margin: 56px auto;
}#callHistory .modal-content {
  border-radius: 16px;
  border: none;
  -webkit-box-shadow: 0 12px 48px rgba(15, 28, 50, 0.18);
          box-shadow: 0 12px 48px rgba(15, 28, 50, 0.18);
  padding: 0;
  overflow: hidden;
}/* ----- Header ----- */#callHistory .ch-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}#callHistory .ch-header-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(20, 69, 113, 0.10);
  color: var(--blue);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#callHistory .ch-header-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
}#callHistory .ch-header-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}#callHistory .ch-title {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: #2d3a48;
}#callHistory .ch-subtitle {
  margin: 0;
  font-size: 12.5px;
  color: var(--dark-grey);
}#callHistory .ch-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(15, 28, 50, 0.06);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--dark-grey);
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: background 0.15s ease, color 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease;
}#callHistory .ch-close:hover {
  background: rgba(15, 28, 50, 0.12);
  color: var(--blue);
}#callHistory .ch-close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}/* ----- Body — scrollable timeline ----- */#callHistory .ch-body {
  padding: 16px 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
}#callHistory .ch-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}#callHistory .ch-card-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}/* Stage pill — kind classes mirror StageBadgePipe and the table's
   .ll-stage-badge color scheme so the timeline reads the same as
   the row's stage column. */#callHistory .ch-stage-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: #eef2f6;
  color: var(--dark-grey);
}#callHistory .ch-stage-pill.success {
  background: rgba(35, 155, 120, 0.12);
  color: var(--green);
}#callHistory .ch-stage-pill.positive {
  background: rgba(35, 155, 120, 0.10);
  color: var(--green);
}#callHistory .ch-stage-pill.form {
  background: rgba(20, 69, 113, 0.10);
  color: var(--blue);
}#callHistory .ch-stage-pill.warm {
  background: rgba(242, 147, 57, 0.14);
  color: var(--pending);
}#callHistory .ch-stage-pill.danger {
  background: rgba(227, 68, 54, 0.12);
  color: var(--orange);
}#callHistory .ch-stage-pill.new {
  background: rgba(20, 69, 113, 0.10);
  color: var(--blue);
}#callHistory .ch-stage-pill.cold {
  background: #eef2f6;
  color: var(--dark-grey);
}#callHistory .ch-stage-pill.neutral {
  background: #eef2f6;
  color: var(--dark-grey);
}#callHistory .ch-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}#callHistory .ch-cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  min-width: 0;
}#callHistory .ch-cell-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--dark-grey);
}#callHistory .ch-cell-value {
  font-size: 13px;
  color: #2d3a48;
  font-weight: 600;
  word-break: break-word;
}#callHistory .ch-cell-meta {
  font-size: 11px;
  color: var(--dark-grey);
  font-weight: 400;
}#callHistory .ch-remark {
  margin: 0;
  padding: 10px 12px;
  border-left: 3px solid var(--orange);
  background: rgba(227, 68, 54, 0.04);
  font-size: 13px;
  color: #2d3a48;
  font-style: italic;
  border-radius: 0 6px 6px 0;
}#callHistory .ch-remark-label {
  font-style: normal;
  font-weight: 700;
  margin-right: 6px;
  color: var(--orange);
}#callHistory .ch-card-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 11.5px;
  color: var(--dark-grey);
}#callHistory .ch-timestamp,
#callHistory .ch-followup {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}#callHistory .ch-followup {
  color: var(--dark-grey);
}#callHistory .ch-status-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  background: #eef2f6;
  color: var(--dark-grey);
}#callHistory .ch-status-done {
  background: rgba(35, 155, 120, 0.14);
  color: var(--green);
}#callHistory .ch-status-pending {
  background: rgba(242, 147, 57, 0.14);
  color: var(--pending);
}#callHistory .ch-update-btn {
  margin-left: auto;
  padding: 5px 12px;
  background: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue-light-1);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  -webkit-transition: background 0.12s ease, color 0.12s ease;
  transition: background 0.12s ease, color 0.12s ease;
}#callHistory .ch-update-btn:hover {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}/* ----- Empty state ----- */#callHistory .ch-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 4px;
  padding: 48px 16px;
  color: var(--light-grey);
  text-align: center;
}#callHistory .ch-empty svg {
  color: var(--light-grey);
  fill: none;
  stroke: currentColor;
  width: 40px;
  height: 40px;
}#callHistory .ch-empty-title {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark-grey);
}#callHistory .ch-empty-sub {
  margin: 0;
  font-size: 12px;
  color: var(--light-grey);
}/* ----- Footer ----- */#callHistory .ch-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  background: #fafbfc;
}#callHistory .ch-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  -webkit-transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}#callHistory .ch-btn-secondary {
  background: var(--white);
  color: var(--dark-grey);
  border: 1px solid var(--border);
}#callHistory .ch-btn-secondary:hover {
  background: #f5f7fa;
  color: var(--blue);
  border-color: var(--blue-light-1);
}#callHistory .ch-btn-primary {
  background: var(--green);
  color: var(--white);
}#callHistory .ch-btn-primary:hover {
  background: #1f8a6a;
}#callHistory .ch-btn-icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}@media (max-width: 540px) {
  #callHistory .modal-dialog {
    margin: 24px auto;
  }

  #callHistory .ch-header,
  #callHistory .ch-body,
  #callHistory .ch-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  #callHistory .ch-card-grid {
    grid-template-columns: 1fr;
  }

  #callHistory .ch-card-footer {
    gap: 8px;
  }

  #callHistory .ch-update-btn {
    margin-left: 0;
    width: 100%;
  }
}/* ============================================================
   Lead Details Modal (#leadDetailsModal) — Phase 2 step 8c.1.
   Replaces the inline expand panel that lived inside the leads
   table. Wider than the other modals (~720px) to fit the 5-tab
   layout. Same global-styles rationale: Bootstrap appends modals
   to <body>, breaking ViewEncapsulation.
   ============================================================ */#leadDetailsModal .modal-dialog {
  width: 720px;
  max-width: 96vw;
  margin: 48px auto;
}#leadDetailsModal .modal-content {
  border-radius: 16px;
  border: none;
  -webkit-box-shadow: 0 12px 48px rgba(15, 28, 50, 0.18);
          box-shadow: 0 12px 48px rgba(15, 28, 50, 0.18);
  padding: 0;
  overflow: hidden;
}/* ----- Header ----- */#leadDetailsModal .lds-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}#leadDetailsModal .lds-header-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(35, 155, 120, 0.12);
  color: var(--green);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#leadDetailsModal .lds-header-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}#leadDetailsModal .lds-header-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}#leadDetailsModal .lds-title {
  margin: 0 0 2px;
  font-size: 16px;
  font-weight: 700;
  color: #2d3a48;
}#leadDetailsModal .lds-subtitle {
  margin: 0;
  font-size: 12.5px;
  color: var(--dark-grey);
}#leadDetailsModal .lds-subtitle strong {
  color: var(--blue);
  font-weight: 600;
}#leadDetailsModal .lds-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(15, 28, 50, 0.06);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--dark-grey);
  cursor: pointer;
  text-decoration: none;
  -webkit-transition: background 0.15s ease, color 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease;
}#leadDetailsModal .lds-close:hover {
  background: rgba(15, 28, 50, 0.12);
  color: var(--blue);
}#leadDetailsModal .lds-close svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}/* ----- Lead summary card ----- */#leadDetailsModal .lds-summary {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: #f7f9fb;
  border-bottom: 1px solid var(--border);
}#leadDetailsModal .lds-avatar {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-family: var(--my-font);
  font-weight: 700;
  font-size: 16px;
  color: var(--white);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}#leadDetailsModal .lds-avatar.touched {
  background: linear-gradient(135deg, #239b78, #049588);
}#leadDetailsModal .lds-avatar.untouched {
  background: linear-gradient(135deg, #e34436, #ff7a6b);
}#leadDetailsModal .lds-summary-text {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
}#leadDetailsModal .lds-name-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}#leadDetailsModal .lds-name {
  font-size: 16px;
  font-weight: 700;
  color: #2d3a48;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}#leadDetailsModal .lds-id,
#leadDetailsModal .lds-instance {
  font-size: 11.5px;
  color: var(--dark-grey);
  font-weight: 500;
}#leadDetailsModal .lds-leadtype {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1px 6px;
  background: var(--blue-light-1);
  color: var(--blue);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}#leadDetailsModal .lds-meta-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}/* Stage / source / priority pills — kind classes mirror the pipes' kinds */#leadDetailsModal .lds-stage-pill,
#leadDetailsModal .lds-priority-pill,
#leadDetailsModal .lds-source-chip {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2px;
  background: #eef2f6;
  color: var(--dark-grey);
}#leadDetailsModal .lds-stage-pill.success {
  background: rgba(35, 155, 120, 0.12);
  color: var(--green);
}#leadDetailsModal .lds-stage-pill.positive {
  background: rgba(35, 155, 120, 0.10);
  color: var(--green);
}#leadDetailsModal .lds-stage-pill.form {
  background: rgba(20, 69, 113, 0.10);
  color: var(--blue);
}#leadDetailsModal .lds-stage-pill.warm {
  background: rgba(242, 147, 57, 0.14);
  color: var(--pending);
}#leadDetailsModal .lds-stage-pill.danger {
  background: rgba(227, 68, 54, 0.12);
  color: var(--orange);
}#leadDetailsModal .lds-stage-pill.new {
  background: rgba(20, 69, 113, 0.10);
  color: var(--blue);
}#leadDetailsModal .lds-stage-pill.cold {
  background: #eef2f6;
  color: var(--dark-grey);
}#leadDetailsModal .lds-priority-pill.high {
  background: rgba(227, 68, 54, 0.12);
  color: var(--orange);
}#leadDetailsModal .lds-priority-pill.med {
  background: rgba(242, 147, 57, 0.16);
  color: var(--pending);
}#leadDetailsModal .lds-priority-pill.low {
  background: #eef2f6;
  color: var(--dark-grey);
}#leadDetailsModal .lds-source-chip.ivr {
  background: rgba(35, 155, 120, 0.14);
  color: var(--green);
}#leadDetailsModal .lds-source-chip.google {
  background: rgba(234, 84, 85, 0.12);
  color: #c63232;
}#leadDetailsModal .lds-source-chip.meta {
  background: rgba(20, 69, 113, 0.10);
  color: var(--blue);
}#leadDetailsModal .lds-source-chip.lp {
  background: rgba(20, 69, 113, 0.10);
  color: var(--blue);
}#leadDetailsModal .lds-source-chip.referral {
  background: rgba(242, 147, 57, 0.14);
  color: var(--pending);
}#leadDetailsModal .lds-score-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  min-width: 96px;
  padding: 12px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
}#leadDetailsModal .lds-score-num {
  font-size: 24px;
  font-weight: 700;
  color: #2d3a48;
  line-height: 1.1;
}#leadDetailsModal .lds-score-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--dark-grey);
  margin-top: 4px;
}/* ----- Tab navigation ----- */#leadDetailsModal .lds-tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0;
  padding: 0 24px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}#leadDetailsModal .lds-tab {
  position: relative;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-grey);
  cursor: pointer;
  white-space: nowrap;
  -webkit-transition: color 0.12s ease, border-color 0.12s ease;
  transition: color 0.12s ease, border-color 0.12s ease;
}#leadDetailsModal .lds-tab:hover {
  color: var(--blue);
}#leadDetailsModal .lds-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}/* ----- Tab body ----- */#leadDetailsModal .lds-body {
  padding: 20px 24px;
  max-height: 60vh;
  overflow-y: auto;
  background: #f7f9fb;
}#leadDetailsModal .lds-tab-panel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 14px;
}/* Each section is a card so the body reads as a stacked dossier
   per screenshot 08 — bordered white pane on the tinted body bg. */#leadDetailsModal .lds-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}#leadDetailsModal .lds-section-title {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--dark-grey);
}#leadDetailsModal .lds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
}#leadDetailsModal .lds-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}#leadDetailsModal .lds-cell {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  min-width: 0;
}#leadDetailsModal .lds-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--dark-grey);
}#leadDetailsModal .lds-value {
  font-size: 14px;
  font-weight: 600;
  color: #2d3a48;
  margin-top: 2px;
  word-break: break-word;
}#leadDetailsModal .lds-value-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--blue);
}#leadDetailsModal .lds-npf {
  margin: 0;
  padding: 10px 12px;
  background: #f7f9fb;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--dark-grey);
  font-style: italic;
}/* ----- Counts tab — number tiles ----- */#leadDetailsModal .lds-counts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}#leadDetailsModal .lds-count-tile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  padding: 14px 12px;
  background: #f7f9fb;
  border: 1px solid var(--border);
  border-radius: 8px;
}#leadDetailsModal .lds-count-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.1;
  text-transform: capitalize;
}#leadDetailsModal .lds-count-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--dark-grey);
  text-align: center;
  letter-spacing: 0.2px;
}/* ----- Footer ----- */#leadDetailsModal .lds-footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  background: #fafbfc;
}#leadDetailsModal .lds-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  -webkit-transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}#leadDetailsModal .lds-btn-secondary {
  background: var(--white);
  color: var(--dark-grey);
  border: 1px solid var(--border);
}#leadDetailsModal .lds-btn-secondary:hover {
  background: #f5f7fa;
  color: var(--blue);
  border-color: var(--blue-light-1);
}#leadDetailsModal .lds-btn-call {
  background: var(--green);
  color: var(--white);
  border: 1px solid var(--green);
}#leadDetailsModal .lds-btn-call:hover {
  background: #1f8a6a;
  border-color: #1f8a6a;
}#leadDetailsModal .lds-btn-whatsapp {
  background: var(--blue);
  color: var(--white);
  border: 1px solid var(--blue);
}#leadDetailsModal .lds-btn-whatsapp:hover {
  background: #0e3858;
  border-color: #0e3858;
}#leadDetailsModal .lds-btn-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}/* Stroked icons — Add Note doc and Change Stage flag use line art;
   Send CAF and Call use filled silhouettes per the buttons that contain them. */#leadDetailsModal .lds-btn-secondary .lds-btn-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}@media (max-width: 720px) {
  #leadDetailsModal .modal-dialog {
    margin: 24px auto;
  }

  #leadDetailsModal .lds-header,
  #leadDetailsModal .lds-summary,
  #leadDetailsModal .lds-body,
  #leadDetailsModal .lds-footer,
  #leadDetailsModal .lds-tabs {
    padding-left: 16px;
    padding-right: 16px;
  }

  #leadDetailsModal .lds-grid {
    grid-template-columns: 1fr;
  }

  #leadDetailsModal .lds-grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }

  #leadDetailsModal .lds-summary {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  #leadDetailsModal .lds-score {
    margin-left: auto;
  }
}/* ============================================================
   Mark as Priority Modal (#priorityModal) — Phase 2.3.1.
   Uses Phase 2 modal design system (.ph2-modal-*). Scoped block
   below covers only the unique content (3 radio priority cards).
   ============================================================ */#priorityModal {
  --ph2-modal-width: 480px;
}/* Body uses tighter 10px gap for stacked radio cards (default
   .ph2-modal-body gap is 14px). */#priorityModal .ph2-modal-body {
  gap: 10px;
}/* Radio card — clickable label with custom radio dot, icon tile,
   title, and helper text. */#priorityModal .pri-card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  -webkit-transition: border-color 0.12s ease, background 0.12s ease, -webkit-box-shadow 0.12s ease;
  transition: border-color 0.12s ease, background 0.12s ease, -webkit-box-shadow 0.12s ease;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, -webkit-box-shadow 0.12s ease;
  margin: 0;
}#priorityModal .pri-card:hover {
  border-color: var(--blue-light-1);
}#priorityModal .pri-card.is-active {
  border-color: var(--blue);
  background: var(--blue-light-1);
  -webkit-box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
          box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08);
}#priorityModal .pri-card input[type='radio'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}#priorityModal .pri-radio {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--white);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: border-color 0.12s ease;
  transition: border-color 0.12s ease;
}#priorityModal .pri-card.is-active .pri-radio {
  border-color: var(--blue);
}#priorityModal .pri-card.is-active .pri-radio::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
}#priorityModal .pri-icon-tile {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#priorityModal .pri-icon-tile svg {
  width: 16px;
  height: 16px;
}#priorityModal .pri-tile-red {
  background: rgba(227, 68, 54, 0.12);
  color: var(--orange);
}#priorityModal .pri-tile-red svg {
  fill: currentColor;
  stroke: none;
}#priorityModal .pri-tile-amber {
  background: rgba(242, 147, 57, 0.16);
  color: var(--pending);
}#priorityModal .pri-tile-grey {
  background: #eef2f6;
  color: var(--dark-grey);
}#priorityModal .pri-tile-grey svg circle {
  fill: currentColor;
}#priorityModal .pri-card-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  min-width: 0;
}#priorityModal .pri-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #2d3a48;
}#priorityModal .pri-card-sub {
  font-size: 12px;
  color: var(--dark-grey);
}/* ============================================================
   Add Lead Note Modal (#leadNote) — Phase 2.3.2.
   Uses Phase 2 modal design system (.ph2-modal-*). Scoped block
   below covers only width and the textarea taller default
   (110px instead of the system default 80px).
   ============================================================ */#leadNote {
  --ph2-modal-width: 460px;
}#leadNote .ln-textarea {
  min-height: 110px;
}/* ============================================================
   Update Lead Modal (#updateLead) — Phase 2.3.3.
   Uses Phase 2 modal design system (.ph2-modal-*). Scoped block
   below covers only what's unique: 2-col grid layout for Name+
   Phone, locked-field bg + right-edge pencil button, native
   select chevron, and ng-select container override.
   ============================================================ */#updateLead {
  --ph2-modal-width: 540px;
}#updateLead .ul-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}/* Wrapper anchor for the absolute-positioned pencil button */#updateLead .ul-input-wrap {
  position: relative;
}/* Locked (disabled) state — light bg, room on right for pencil */#updateLead .ph2-form-input.is-locked {
  background: #f0f3f6;
  color: var(--dark-grey);
  padding-right: 36px;
  cursor: default;
}#updateLead .ph2-form-input[disabled] {
  cursor: default;
}/* Right-edge pencil button to enable a locked field */#updateLead .ul-pencil {
  position: absolute;
  right: 6px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--dark-grey);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-transition: background 0.12s ease, color 0.12s ease;
  transition: background 0.12s ease, color 0.12s ease;
}#updateLead .ul-pencil:hover {
  background: rgba(20, 69, 113, 0.10);
  color: var(--blue);
}#updateLead .ul-pencil svg {
  width: 14px;
  height: 14px;
}/* Native <select> chevron matching the input look */#updateLead .ul-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--dark-grey) 50%),
    linear-gradient(135deg, var(--dark-grey) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}/* ng-select container — match the .ph2-form-input visual */#updateLead .ul-ng-select .ng-select-container {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  min-height: 40px !important;
  font-size: 13px !important;
  font-family: var(--my-font) !important;
  background: var(--white) !important;
  -webkit-transition: border-color 0.12s ease, -webkit-box-shadow 0.12s ease;
  transition: border-color 0.12s ease, -webkit-box-shadow 0.12s ease;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, -webkit-box-shadow 0.12s ease;
}#updateLead .ul-ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container {
  border-color: var(--blue) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08) !important;
          box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08) !important;
}@media (max-width: 540px) {
  #updateLead .ul-grid {
    grid-template-columns: 1fr;
  }
}/* ============================================================
   Send CAF Link Modal (#cafLink) — Phase 2.3.4.
   Uses Phase 2 modal design system (.ph2-modal-*). Scoped block
   below covers only what's unique: phone hint, college meta
   row, ng-select container override, readonly link textarea +
   copy button. Shared by both render sites
   (home.component.html + lead-nav-bar.component.html).
   ============================================================ */#cafLink {
  --ph2-modal-width: 540px;
}#cafLink .caf-hint {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--dark-grey);
  margin-top: 2px;
}#cafLink .caf-hint-icon {
  width: 12px;
  height: 12px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#cafLink .caf-clg-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--dark-grey);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}#cafLink .caf-clg-meta strong {
  color: #2d3a48;
  font-weight: 600;
  margin-right: 2px;
}/* ng-select container — match the .ph2-form-input visual */#cafLink .caf-ng-select .ng-select-container {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  min-height: 40px !important;
  font-size: 13px !important;
  font-family: var(--my-font) !important;
  background: var(--white) !important;
  -webkit-transition: border-color 0.12s ease, -webkit-box-shadow 0.12s ease;
  transition: border-color 0.12s ease, -webkit-box-shadow 0.12s ease;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, -webkit-box-shadow 0.12s ease;
}#cafLink .caf-ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container {
  border-color: var(--blue) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08) !important;
          box-shadow: 0 0 0 3px rgba(20, 69, 113, 0.08) !important;
}/* Generated-link readonly textarea + copy button overlay */#cafLink .caf-link-wrap {
  position: relative;
}#cafLink .caf-link-readonly {
  width: 100%;
  min-height: 96px;
  padding: 12px 14px;
  padding-right: 44px;
  background: #f0f3f6;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--dark-grey);
  line-height: 1.55;
  word-break: break-all;
  resize: vertical;
  cursor: text;
}#cafLink .caf-link-readonly:focus {
  outline: none;
  border-color: var(--blue);
}#cafLink .caf-copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--dark-grey);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}#cafLink .caf-copy-btn:hover:not([disabled]) {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}#cafLink .caf-copy-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}#cafLink .caf-copy-btn svg {
  width: 14px;
  height: 14px;
}/* ============================================================
   Send WhatsApp Template Modal (#wpModal) — Phase 2.3.5.
   Layered on top of .ph2-modal-* base. Width is conditional:
   720px default (Non-Enterprise + Smart Template tabs) widens to
   880px when .wp-with-preview is set, and that class is only
   activated for Enterprise tab (which needs the live preview pane).
   All 3 tabs share the same .ph2-form-* styling. Smart Template
   uses an extra prompt-row + green sparkle button for AI generation;
   that backend may have issues in production but is preserved
   verbatim — UI consistency only in this phase.
   ============================================================ */#wpModal {
  --ph2-modal-width: 720px;
}#wpModal .ph2-modal-dialog.wp-with-preview {
  --ph2-modal-width: 880px;
}#wpModal .ph2-modal-icon-green {
  background: rgba(37, 211, 102, 0.12);
  color: #25d366;
}/* Tab strip + Click-to-Chat pill -------------------------- */#wpModal .wp-tab-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 12px;
  padding: 0 22px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}#wpModal .wp-tab-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
}#wpModal .wp-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 4px;
  margin-right: 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mid-grey);
  cursor: pointer;
  -webkit-transition: color 0.12s ease, border-color 0.12s ease;
  transition: color 0.12s ease, border-color 0.12s ease;
}#wpModal .wp-tab:hover {
  color: var(--dark-grey);
}#wpModal .wp-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}#wpModal .wp-chat-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(37, 211, 102, 0.12);
  color: #1f9c4f;
  border: 1px solid rgba(37, 211, 102, 0.35);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: background 0.12s ease;
  transition: background 0.12s ease;
}#wpModal .wp-chat-pill:hover {
  background: rgba(37, 211, 102, 0.2);
}#wpModal .wp-chat-pill svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}/* Body & tab panes ---------------------------------------- */#wpModal .wp-body {
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}#wpModal .wp-tab-pane {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}#wpModal .wp-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 24px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}@media (max-width: 768px) {
  #wpModal .wp-content-grid {
    grid-template-columns: 1fr;
  }
}#wpModal .wp-form-col,
#wpModal .wp-preview-col {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 14px;
}/* ng-select theming -------------------------------------- */#wpModal .wp-ng-select .ng-select-container {
  min-height: 38px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: var(--white) !important;
}#wpModal .wp-ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container {
  border-color: var(--blue) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(33, 119, 255, 0.12) !important;
          box-shadow: 0 0 0 3px rgba(33, 119, 255, 0.12) !important;
}#wpModal .wp-textarea {
  min-height: 110px;
  resize: vertical;
}/* Smart Template (tab3) prompt row ----------------------- */#wpModal .wp-ai-prompt-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}#wpModal .wp-ai-prompt-input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}#wpModal .wp-ai-spark-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 8px;
  background: var(--green);
  color: var(--white);
  border: 1px solid var(--green);
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#wpModal .wp-ai-spark-btn:hover {
  background: #1f8567;
  border-color: #1f8567;
}#wpModal .wp-ai-spark-btn svg {
  width: 16px;
  height: 16px;
}/* Header media upload ------------------------------------ */#wpModal .wp-upload-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}#wpModal .wp-upload-preview {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid var(--border);
  background: var(--lighter-grey);
}#wpModal .wp-upload-tile {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: var(--lighter-grey);
  color: var(--dark-grey);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  text-transform: capitalize;
}#wpModal .wp-upload-tile:hover {
  background: var(--white);
  border-color: var(--blue);
  color: var(--blue);
}#wpModal .wp-upload-tile input[type='file'] {
  display: none;
}#wpModal .wp-upload-tile svg {
  width: 14px;
  height: 14px;
}#wpModal .wp-doc-link {
  font-size: 12px;
  color: var(--blue);
  text-decoration: underline;
}/* Variable rows ------------------------------------------ */#wpModal .wp-variable-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 10px;
  margin-bottom: 8px;
}#wpModal .wp-variable-row:last-child {
  margin-bottom: 0;
}#wpModal .wp-variable-key {
  background: var(--lighter-grey);
  color: var(--mid-grey);
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 12px;
}/* Live preview bubble ------------------------------------ */#wpModal .wp-preview-label {
  margin-bottom: 0;
}#wpModal .wp-preview-bubble {
  background: #ece5dd;
  /* WhatsApp chat-room beige */
  border-radius: 10px;
  padding: 14px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
  border: 1px solid var(--border);
}#wpModal .wp-preview-account {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}#wpModal .wp-preview-avatar {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #25d366;
  color: var(--white);
}#wpModal .wp-preview-avatar svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}#wpModal .wp-preview-account-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  line-height: 1.2;
}#wpModal .wp-preview-account-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-grey);
}#wpModal .wp-preview-account-sub {
  font-size: 11px;
  color: var(--mid-grey);
}#wpModal .wp-preview-message {
  background: var(--white);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--dark-grey);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
  word-break: break-word;
}#wpModal .wp-preview-media {
  width: 100%;
  max-height: 160px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
  display: block;
}#wpModal .wp-preview-header-text {
  font-weight: 600;
  margin: 0 0 6px 0;
}#wpModal .wp-preview-body {
  margin: 0;
  white-space: pre-wrap;
}#wpModal .wp-preview-footer {
  margin: 8px 0 0 0;
  font-size: 11px;
  color: var(--mid-grey);
}/* ============================================================
   Shortlist College & Course Modal (#Shortlist) — Phase 2.3.6.
   Layered on top of .ph2-modal-* base. Wider modal (880px) with
   a top toolbar (college + course + add) followed by an Angular-
   state-driven accordion of shortlisted colleges + courses table.
   The previous render delegated to <app-recommandation-college>;
   that child still exists in commonshare.module.ts but is no
   longer rendered anywhere — see Phase 3 backlog for cleanup.
   ============================================================ */#Shortlist {
  --ph2-modal-width: 880px;
}#Shortlist .ph2-modal-icon-blue {
  background: rgba(33, 119, 255, 0.12);
  color: var(--blue);
}#Shortlist .sl-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 18px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}/* Toolbar ------------------------------------------------- */#Shortlist .sl-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  padding: 14px;
  background: var(--lighter-grey);
  border: 1px solid var(--border);
  border-radius: 10px;
}#Shortlist .sl-toolbar-field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
  min-width: 0;
}#Shortlist .sl-toolbar-field .ph2-form-label {
  margin: 0;
}#Shortlist .sl-toolbar-action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}#Shortlist .sl-add-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--green);
  color: var(--white);
  border: 1px solid var(--green);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: background 0.15s ease, border-color 0.15s ease;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}#Shortlist .sl-add-btn:hover {
  background: #1f8567;
  border-color: #1f8567;
}#Shortlist .sl-add-btn svg {
  width: 14px;
  height: 14px;
}/* Third-party select theming ------------------------------ */#Shortlist .sl-ng-select .ng-select-container {
  min-height: 38px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: var(--white) !important;
}#Shortlist .sl-ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container {
  border-color: var(--blue) !important;
  -webkit-box-shadow: 0 0 0 3px rgba(33, 119, 255, 0.12) !important;
          box-shadow: 0 0 0 3px rgba(33, 119, 255, 0.12) !important;
}#Shortlist .sl-ng-multi .multiselect-dropdown .dropdown-btn {
  min-height: 38px !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: var(--white) !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
}/* Summary row --------------------------------------------- */#Shortlist .sl-summary-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}#Shortlist .sl-summary-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--mid-grey);
}#Shortlist .sl-count-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(33, 119, 255, 0.12);
  color: var(--blue);
  font-size: 12px;
  font-weight: 500;
}/* Accordion cards ---------------------------------------- */#Shortlist .sl-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
  -webkit-transition: -webkit-box-shadow 0.15s ease;
  transition: -webkit-box-shadow 0.15s ease;
  transition: box-shadow 0.15s ease;
  transition: box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
}#Shortlist .sl-card.is-open {
  -webkit-box-shadow: 0 1px 4px rgba(15, 28, 49, 0.06);
          box-shadow: 0 1px 4px rgba(15, 28, 49, 0.06);
}#Shortlist .sl-card-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--white);
  border: 0;
  padding: 12px 16px;
  cursor: pointer;
  text-align: left;
  -webkit-transition: background 0.12s ease;
  transition: background 0.12s ease;
}#Shortlist .sl-card-head:hover {
  background: var(--lighter-grey);
}#Shortlist .sl-card-mark {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(33, 119, 255, 0.12);
  color: var(--blue);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
}#Shortlist .sl-card-name {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-grey);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}#Shortlist .sl-card-meta {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--lighter-grey);
  color: var(--mid-grey);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}#Shortlist .sl-chevron {
  width: 14px;
  height: 14px;
  color: var(--mid-grey);
  -webkit-transition: -webkit-transform 0.18s ease;
  transition: -webkit-transform 0.18s ease;
  transition: transform 0.18s ease;
  transition: transform 0.18s ease, -webkit-transform 0.18s ease;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#Shortlist .sl-card.is-open .sl-chevron {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  color: var(--blue);
}#Shortlist .sl-card-body {
  border-top: 1px solid var(--border);
  overflow-x: auto;
}/* Courses table ------------------------------------------ */#Shortlist .sl-courses-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}#Shortlist .sl-courses-table thead th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mid-grey);
  background: var(--lighter-grey);
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}#Shortlist .sl-courses-table tbody td {
  padding: 12px 16px;
  color: var(--dark-grey);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}#Shortlist .sl-courses-table tbody tr:last-child td {
  border-bottom: 0;
}#Shortlist .sl-th-action,
#Shortlist .sl-td-action {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}#Shortlist .sl-remove-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.25);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}#Shortlist .sl-remove-btn:hover {
  background: #dc3545;
  color: var(--white);
  border-color: #dc3545;
}/* Empty state -------------------------------------------- */#Shortlist .sl-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 36px 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--lighter-grey);
  text-align: center;
}#Shortlist .sl-empty-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  color: var(--mid-grey);
  margin-bottom: 4px;
}#Shortlist .sl-empty-icon svg {
  width: 20px;
  height: 20px;
}#Shortlist .sl-empty-text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-grey);
}#Shortlist .sl-empty-hint {
  margin: 0;
  font-size: 12px;
  color: var(--mid-grey);
  max-width: 320px;
}/* Responsive --------------------------------------------- */@media (max-width: 720px) {
  #Shortlist .sl-toolbar {
    grid-template-columns: 1fr;
  }

  #Shortlist .sl-toolbar-action {
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }

  #Shortlist .sl-add-btn {
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

  #Shortlist .sl-card-head {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }

  #Shortlist .sl-card-name {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    white-space: normal;
  }
}/* ============================================================
   Conversation & Activity Timeline Modal (#leadActivity) —
   Phase 2.3.7. Layered on top of .ph2-modal-* base. Width 880px,
   stat-strip + action-button toolbar above a vertical timeline of
   .la-card blocks. The component pre-computes every per-event
   field (dotClass, tagClass, showScore, etc.) so the template
   makes no function calls — preserves the OnPush change detection
   strategy already in place on the component class.
   ============================================================ */#leadActivity {
  --ph2-modal-width: 880px;
}#leadActivity .ph2-modal-icon-blue {
  background: rgba(33, 119, 255, 0.12);
  color: var(--blue);
}#leadActivity .la-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 18px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}/* Toolbar ------------------------------------------------- */#leadActivity .la-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 16px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--lighter-grey);
  border: 1px solid var(--border);
  border-radius: 10px;
}#leadActivity .la-stat-strip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px 14px;
}#leadActivity .la-stat {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 5px;
  position: relative;
}#leadActivity .la-stat+.la-stat::before {
  content: '·';
  margin-right: 9px;
  color: var(--mid-grey);
  font-weight: 600;
}#leadActivity .la-stat-num {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark-grey);
  line-height: 1.1;
}#leadActivity .la-stat-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--mid-grey);
}#leadActivity .la-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}#leadActivity .la-action-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--white);
  color: var(--dark-grey);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}#leadActivity .la-action-btn:hover:not([disabled]) {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}#leadActivity .la-action-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}#leadActivity .la-action-btn svg {
  width: 13px;
  height: 13px;
}/* Timeline ----------------------------------------------- */#leadActivity .la-timeline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
}#leadActivity .la-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  gap: 14px;
  padding: 0 0 14px 0;
  position: relative;
}#leadActivity .la-card:last-child {
  padding-bottom: 0;
}#leadActivity .la-rail {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 28px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}#leadActivity .la-rail::before {
  content: '';
  position: absolute;
  top: 30px;
  bottom: -14px;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--border);
}#leadActivity .la-card:last-child .la-rail::before {
  display: none;
}#leadActivity .la-dot {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-top: 4px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--white);
  -webkit-box-shadow: 0 0 0 3px var(--white);
          box-shadow: 0 0 0 3px var(--white);
}#leadActivity .la-dot svg {
  width: 14px;
  height: 14px;
}#leadActivity .la-dot-blue {
  background: var(--blue);
}#leadActivity .la-dot-green {
  background: #25a565;
}#leadActivity .la-dot-amber {
  background: #f5a524;
}#leadActivity .la-dot-grey {
  background: var(--mid-grey);
}/* Card body --------------------------------------------- */#leadActivity .la-card-body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
}#leadActivity .la-card-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
}#leadActivity .la-tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}#leadActivity .la-tag-blue {
  background: rgba(33, 119, 255, 0.12);
  color: var(--blue);
}#leadActivity .la-tag-green {
  background: rgba(37, 165, 101, 0.14);
  color: #1f8857;
}#leadActivity .la-tag-amber {
  background: rgba(245, 165, 36, 0.18);
  color: #b87411;
}#leadActivity .la-tag-grey {
  background: var(--lighter-grey);
  color: var(--mid-grey);
}#leadActivity .la-card-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  word-break: break-word;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}#leadActivity .la-card-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--dark-grey);
}#leadActivity .la-meta-sep {
  color: var(--mid-grey);
}#leadActivity .la-meta-link {
  color: var(--blue);
  cursor: pointer;
  text-decoration: none;
}#leadActivity .la-meta-link:hover {
  text-decoration: underline;
}/* Score pill -------------------------------------------- */#leadActivity .la-score {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin-top: 6px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 36px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--lighter-grey);
  color: var(--mid-grey);
}#leadActivity .la-score-pos {
  background: rgba(37, 165, 101, 0.14);
  color: #1f8857;
}#leadActivity .la-score-neg {
  background: rgba(220, 53, 69, 0.14);
  color: #c1303d;
}#leadActivity .la-score-zero {
  background: #f3f4f6;
  color: var(--dark-grey);
}/* Load more + empty state ------------------------------- */#leadActivity .la-load-more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 4px;
}#leadActivity .la-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 36px 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--lighter-grey);
  text-align: center;
}#leadActivity .la-empty-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(33, 119, 255, 0.12);
  color: var(--blue);
  margin-bottom: 4px;
}#leadActivity .la-empty-icon svg {
  width: 20px;
  height: 20px;
}#leadActivity .la-empty-text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-grey);
}#leadActivity .la-empty-hint {
  margin: 0;
  font-size: 12px;
  color: var(--mid-grey);
  max-width: 360px;
}/* Responsive --------------------------------------------- */@media (max-width: 768px) {
  #leadActivity .la-toolbar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }

  #leadActivity .la-stat-strip {
    gap: 16px;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

  #leadActivity .la-stat {
    min-width: 0;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }

  #leadActivity .la-actions {
    -webkit-box-pack: stretch;
        -ms-flex-pack: stretch;
            justify-content: stretch;
  }

  #leadActivity .la-action-btn {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}/* ============================================================
   Recent Re-Enquired College List Modal (#recentReenquiredModal)
   — Phase 2.3.8. Layered on top of .ph2-modal-* base. Wide
   modal (1080px) with a stat-strip toolbar above a sticky-
   header table on desktop and parallel card layout on mobile.
   Pattern note: .rrc-stat (middle-dot strip), .rrc-empty, and
   the .rrc-badge-{blue,green,amber,grey} soft pills mirror
   the equivalents in #leadActivity (.la-stat / .la-empty /
   .la-tag-*) — promote to a global .ph2-* set in Phase 3.
   ============================================================ */#recentReenquiredModal {
  --ph2-modal-width: 1080px;
}#recentReenquiredModal .ph2-modal-icon-amber {
  background: rgba(245, 165, 36, 0.15);
  color: #b87411;
}#recentReenquiredModal .rrc-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}/* Toolbar ------------------------------------------------- */#recentReenquiredModal .rrc-toolbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 16px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--lighter-grey);
  border: 1px solid var(--border);
  border-radius: 10px;
}#recentReenquiredModal .rrc-stat-strip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 6px 14px;
}#recentReenquiredModal .rrc-stat {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 5px;
  position: relative;
}#recentReenquiredModal .rrc-stat+.rrc-stat::before {
  content: '·';
  margin-right: 9px;
  color: var(--mid-grey);
  font-weight: 600;
}#recentReenquiredModal .rrc-stat-num {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark-grey);
  line-height: 1.1;
}#recentReenquiredModal .rrc-stat-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--mid-grey);
}#recentReenquiredModal .rrc-toolbar-meta {
  font-size: 13px;
  color: var(--mid-grey);
}#recentReenquiredModal .rrc-toolbar-meta strong {
  color: var(--dark-grey);
  font-weight: 600;
}/* Table -------------------------------------------------- */#recentReenquiredModal .rrc-table-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
}#recentReenquiredModal .rrc-table-scroll {
  overflow-x: auto;
  max-height: 520px;
  overflow-y: auto;
}#recentReenquiredModal .rrc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}#recentReenquiredModal .rrc-th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--dark-grey);
  background: var(--lighter-grey);
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}#recentReenquiredModal .rrc-th-num {
  width: 1%;
  white-space: nowrap;
}#recentReenquiredModal .rrc-td {
  padding: 12px 14px;
  color: var(--dark-grey);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}#recentReenquiredModal .rrc-table tbody tr:last-child .rrc-td {
  border-bottom: 0;
}#recentReenquiredModal .rrc-table tbody tr:hover {
  background: var(--bg-light);
}#recentReenquiredModal .rrc-td-num {
  font-variant-numeric: tabular-nums;
  color: var(--mid-grey);
  width: 1%;
  white-space: nowrap;
}#recentReenquiredModal .rrc-td-date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}#recentReenquiredModal .rrc-date-sep {
  color: var(--mid-grey);
  margin: 0 4px;
}#recentReenquiredModal .rrc-college-name {
  color: var(--blue);
  font-weight: 600;
}#recentReenquiredModal .rrc-college-name-unknown {
  color: var(--dark-grey);
  font-weight: 500;
  font-style: italic;
}#recentReenquiredModal .rrc-api-response {
  display: inline-block;
  max-width: 220px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 11px;
  background: var(--lighter-grey);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--dark-grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}#recentReenquiredModal .rrc-empty-cell {
  color: var(--light-grey);
  font-weight: 500;
}/* Soft semantic badges ------------------------------------ */#recentReenquiredModal .rrc-badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}#recentReenquiredModal .rrc-badge-blue {
  background: rgba(33, 119, 255, 0.12);
  color: var(--blue);
}#recentReenquiredModal .rrc-badge-green {
  background: rgba(37, 165, 101, 0.14);
  color: #1f8857;
}#recentReenquiredModal .rrc-badge-amber {
  background: rgba(245, 165, 36, 0.18);
  color: #b87411;
}#recentReenquiredModal .rrc-badge-grey {
  background: var(--lighter-grey);
  color: var(--mid-grey);
}/* Mobile cards (display swapped on @media below) ---------- */#recentReenquiredModal .rrc-cards {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}#recentReenquiredModal .rrc-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  overflow: hidden;
}#recentReenquiredModal .rrc-card-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--lighter-grey);
  border-bottom: 1px solid var(--border);
}#recentReenquiredModal .rrc-card-pill {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--mid-grey);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}#recentReenquiredModal .rrc-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  padding: 12px 14px;
}#recentReenquiredModal .rrc-card-row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
  min-width: 0;
}#recentReenquiredModal .rrc-card-row-wide {
  grid-column: 1 / -1;
}#recentReenquiredModal .rrc-card-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mid-grey);
}/* Empty state -------------------------------------------- */#recentReenquiredModal .rrc-empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 36px 16px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--lighter-grey);
  text-align: center;
}#recentReenquiredModal .rrc-empty-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(245, 165, 36, 0.15);
  color: #b87411;
  margin-bottom: 4px;
}#recentReenquiredModal .rrc-empty-icon svg {
  width: 20px;
  height: 20px;
}#recentReenquiredModal .rrc-empty-text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--dark-grey);
}#recentReenquiredModal .rrc-empty-hint {
  margin: 0;
  font-size: 12px;
  color: var(--mid-grey);
  max-width: 360px;
}/* Responsive --------------------------------------------- */@media (max-width: 768px) {
  #recentReenquiredModal .rrc-toolbar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }

  #recentReenquiredModal .rrc-table-wrap {
    display: none;
  }

  #recentReenquiredModal .rrc-cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  #recentReenquiredModal .rrc-card-grid {
    grid-template-columns: 1fr;
  }

  #recentReenquiredModal .rrc-api-response {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
  }
}
/* based on angular-toastr css https://github.com/Foxandxss/angular-toastr/blob/cb508fe6801d6b288d3afc525bb40fee1b101650/dist/angular-toastr.css */

/* position */

.toast-center-center {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.toast-top-center {
  top: 0;
  right: 0;
  width: 100%;
}

.toast-bottom-center {
  bottom: 0;
  right: 0;
  width: 100%;
}

.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%;
}

.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%;
}

.toast-top-left {
  top: 12px;
  left: 12px;
}

.toast-top-right {
  top: 12px;
  right: 12px;
}

.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}

.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}

/* toast styles */

.toast-title {
  font-weight: bold;
}

.toast-message {
  word-wrap: break-word;
}

.toast-message a,
.toast-message label {
  color: #FFFFFF;
}

.toast-message a:hover {
  color: #CCCCCC;
  text-decoration: none;
}

.toast-close-button {
  position: relative;
  right: -0.3em;
  top: -0.3em;
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: 0 1px 0 #ffffff;
  /* opacity: 0.8; */
}

.toast-close-button:hover,
.toast-close-button:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
}

/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/

button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
}

.toast-container {
  pointer-events: none;
  position: fixed;
  z-index: 999999;
}

.toast-container * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.toast-container .ngx-toastr {
  position: relative;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 300px;
  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  background-size: 24px;
  -webkit-box-shadow: 0 0 12px #999999;
          box-shadow: 0 0 12px #999999;
  color: #FFFFFF;
}

.toast-container .ngx-toastr:hover {
  -webkit-box-shadow: 0 0 12px #000000;
          box-shadow: 0 0 12px #000000;
  opacity: 1;
  cursor: pointer;
}

/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/info-circle.svg */

.toast-info {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath fill='rgb(255,255,255)' d='M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z'/%3E%3C/svg%3E");
}

/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/times-circle.svg */

.toast-error {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath fill='rgb(255,255,255)' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z'/%3E%3C/svg%3E");
}

/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/check.svg */

.toast-success {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath fill='rgb(255,255,255)' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");
}

/* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/exclamation-triangle.svg */

.toast-warning {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' width='576' height='512'%3E%3Cpath fill='rgb(255,255,255)' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
}

.toast-container.toast-top-center .ngx-toastr,
.toast-container.toast-bottom-center .ngx-toastr {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.toast-container.toast-top-full-width .ngx-toastr,
.toast-container.toast-bottom-full-width .ngx-toastr {
  width: 96%;
  margin-left: auto;
  margin-right: auto;
}

.ngx-toastr {
  background-color: #030303;
  pointer-events: auto;
}

.toast-success {
  background-color: #51A351;
}

.toast-error {
  background-color: #BD362F;
}

.toast-info {
  background-color: #2F96B4;
}

.toast-warning {
  background-color: #F89406;
}

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background-color: #000000;
  opacity: 0.4;
}

/* Responsive Design */

@media all and (max-width: 240px) {
  .toast-container .ngx-toastr.div {
    padding: 8px 8px 8px 50px;
    width: 11em;
  }
  .toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}

@media all and (min-width: 241px) and (max-width: 480px) {
  .toast-container .ngx-toastr.div {
    padding: 8px 8px 8px 50px;
    width: 18em;
  }
  .toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}

@media all and (min-width: 481px) and (max-width: 768px) {
  .toast-container .ngx-toastr.div {
    padding: 15px 15px 15px 50px;
    width: 25em;
  }
}

:root{--dt-row-selected: 13, 110, 253;--dt-row-selected-text: 255, 255, 255;--dt-row-selected-link: 9, 10, 11;--dt-row-stripe: 0, 0, 0;--dt-row-hover: 0, 0, 0;--dt-column-ordering: 0, 0, 0;--dt-html-background: white}:root.dark{--dt-html-background: rgb(33, 37, 41)}table.dataTable td.dt-control{text-align:center;cursor:pointer}table.dataTable td.dt-control:before{display:inline-block;color:rgba(0, 0, 0, 0.5);content:"▶"}table.dataTable tr.dt-hasChild td.dt-control:before{content:"▼"}html.dark table.dataTable td.dt-control:before,:root[data-bs-theme=dark] table.dataTable td.dt-control:before{color:rgba(255, 255, 255, 0.5)}html.dark table.dataTable tr.dt-hasChild td.dt-control:before,:root[data-bs-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before{color:rgba(255, 255, 255, 0.5)}table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting_asc_disabled,table.dataTable thead>tr>th.sorting_desc_disabled,table.dataTable thead>tr>td.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting_asc_disabled,table.dataTable thead>tr>td.sorting_desc_disabled{cursor:pointer;position:relative;padding-right:26px}table.dataTable thead>tr>th.sorting:before,table.dataTable thead>tr>th.sorting:after,table.dataTable thead>tr>th.sorting_asc:before,table.dataTable thead>tr>th.sorting_asc:after,table.dataTable thead>tr>th.sorting_desc:before,table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>th.sorting_asc_disabled:before,table.dataTable thead>tr>th.sorting_asc_disabled:after,table.dataTable thead>tr>th.sorting_desc_disabled:before,table.dataTable thead>tr>th.sorting_desc_disabled:after,table.dataTable thead>tr>td.sorting:before,table.dataTable thead>tr>td.sorting:after,table.dataTable thead>tr>td.sorting_asc:before,table.dataTable thead>tr>td.sorting_asc:after,table.dataTable thead>tr>td.sorting_desc:before,table.dataTable thead>tr>td.sorting_desc:after,table.dataTable thead>tr>td.sorting_asc_disabled:before,table.dataTable thead>tr>td.sorting_asc_disabled:after,table.dataTable thead>tr>td.sorting_desc_disabled:before,table.dataTable thead>tr>td.sorting_desc_disabled:after{position:absolute;display:block;opacity:.125;right:10px;line-height:9px;font-size:.8em}table.dataTable thead>tr>th.sorting:before,table.dataTable thead>tr>th.sorting_asc:before,table.dataTable thead>tr>th.sorting_desc:before,table.dataTable thead>tr>th.sorting_asc_disabled:before,table.dataTable thead>tr>th.sorting_desc_disabled:before,table.dataTable thead>tr>td.sorting:before,table.dataTable thead>tr>td.sorting_asc:before,table.dataTable thead>tr>td.sorting_desc:before,table.dataTable thead>tr>td.sorting_asc_disabled:before,table.dataTable thead>tr>td.sorting_desc_disabled:before{bottom:50%;content:"▲";content:"▲"/""}table.dataTable thead>tr>th.sorting:after,table.dataTable thead>tr>th.sorting_asc:after,table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>th.sorting_asc_disabled:after,table.dataTable thead>tr>th.sorting_desc_disabled:after,table.dataTable thead>tr>td.sorting:after,table.dataTable thead>tr>td.sorting_asc:after,table.dataTable thead>tr>td.sorting_desc:after,table.dataTable thead>tr>td.sorting_asc_disabled:after,table.dataTable thead>tr>td.sorting_desc_disabled:after{top:50%;content:"▼";content:"▼"/""}table.dataTable thead>tr>th.sorting_asc:before,table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>td.sorting_asc:before,table.dataTable thead>tr>td.sorting_desc:after{opacity:.6}table.dataTable thead>tr>th.sorting_desc_disabled:after,table.dataTable thead>tr>th.sorting_asc_disabled:before,table.dataTable thead>tr>td.sorting_desc_disabled:after,table.dataTable thead>tr>td.sorting_asc_disabled:before{display:none}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}div.dataTables_scrollBody>table.dataTable>thead>tr>th:before,div.dataTables_scrollBody>table.dataTable>thead>tr>th:after,div.dataTables_scrollBody>table.dataTable>thead>tr>td:before,div.dataTables_scrollBody>table.dataTable>thead>tr>td:after{display:none}div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:2px;z-index:10}div.dataTables_processing>div:last-child{position:relative;width:80px;height:15px;margin:1em auto}div.dataTables_processing>div:last-child>div{position:absolute;top:0;width:13px;height:13px;border-radius:50%;background:rgb(13, 110, 253);background:rgb(var(--dt-row-selected));-webkit-animation-timing-function:cubic-bezier(0, 1, 1, 0);animation-timing-function:cubic-bezier(0, 1, 1, 0)}div.dataTables_processing>div:last-child>div:nth-child(1){left:8px;-webkit-animation:datatables-loader-1 .6s infinite;animation:datatables-loader-1 .6s infinite}div.dataTables_processing>div:last-child>div:nth-child(2){left:8px;-webkit-animation:datatables-loader-2 .6s infinite;animation:datatables-loader-2 .6s infinite}div.dataTables_processing>div:last-child>div:nth-child(3){left:32px;-webkit-animation:datatables-loader-2 .6s infinite;animation:datatables-loader-2 .6s infinite}div.dataTables_processing>div:last-child>div:nth-child(4){left:56px;-webkit-animation:datatables-loader-3 .6s infinite;animation:datatables-loader-3 .6s infinite}@-webkit-keyframes datatables-loader-1{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes datatables-loader-1{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes datatables-loader-3{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);transform:scale(0)}}@keyframes datatables-loader-3{0%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:scale(0);transform:scale(0)}}@-webkit-keyframes datatables-loader-2{0%{-webkit-transform:translate(0, 0);transform:translate(0, 0)}100%{-webkit-transform:translate(24px, 0);transform:translate(24px, 0)}}@keyframes datatables-loader-2{0%{-webkit-transform:translate(0, 0);transform:translate(0, 0)}100%{-webkit-transform:translate(24px, 0);transform:translate(24px, 0)}}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}table.dataTable th.dt-left,table.dataTable td.dt-left{text-align:left}table.dataTable th.dt-center,table.dataTable td.dt-center,table.dataTable td.dataTables_empty{text-align:center}table.dataTable th.dt-right,table.dataTable td.dt-right{text-align:right}table.dataTable th.dt-justify,table.dataTable td.dt-justify{text-align:justify}table.dataTable th.dt-nowrap,table.dataTable td.dt-nowrap{white-space:nowrap}table.dataTable thead th,table.dataTable thead td,table.dataTable tfoot th,table.dataTable tfoot td{text-align:left}table.dataTable thead th.dt-head-left,table.dataTable thead td.dt-head-left,table.dataTable tfoot th.dt-head-left,table.dataTable tfoot td.dt-head-left{text-align:left}table.dataTable thead th.dt-head-center,table.dataTable thead td.dt-head-center,table.dataTable tfoot th.dt-head-center,table.dataTable tfoot td.dt-head-center{text-align:center}table.dataTable thead th.dt-head-right,table.dataTable thead td.dt-head-right,table.dataTable tfoot th.dt-head-right,table.dataTable tfoot td.dt-head-right{text-align:right}table.dataTable thead th.dt-head-justify,table.dataTable thead td.dt-head-justify,table.dataTable tfoot th.dt-head-justify,table.dataTable tfoot td.dt-head-justify{text-align:justify}table.dataTable thead th.dt-head-nowrap,table.dataTable thead td.dt-head-nowrap,table.dataTable tfoot th.dt-head-nowrap,table.dataTable tfoot td.dt-head-nowrap{white-space:nowrap}table.dataTable tbody th.dt-body-left,table.dataTable tbody td.dt-body-left{text-align:left}table.dataTable tbody th.dt-body-center,table.dataTable tbody td.dt-body-center{text-align:center}table.dataTable tbody th.dt-body-right,table.dataTable tbody td.dt-body-right{text-align:right}table.dataTable tbody th.dt-body-justify,table.dataTable tbody td.dt-body-justify{text-align:justify}table.dataTable tbody th.dt-body-nowrap,table.dataTable tbody td.dt-body-nowrap{white-space:nowrap}table.dataTable{width:100%;margin:0 auto;clear:both;border-collapse:separate;border-spacing:0}table.dataTable thead th,table.dataTable tfoot th{font-weight:bold}table.dataTable>thead>tr>th,table.dataTable>thead>tr>td{padding:10px;border-bottom:1px solid rgba(0, 0, 0, 0.3)}table.dataTable>thead>tr>th:active,table.dataTable>thead>tr>td:active{outline:none}table.dataTable>tfoot>tr>th,table.dataTable>tfoot>tr>td{padding:10px 10px 6px 10px;border-top:1px solid rgba(0, 0, 0, 0.3)}table.dataTable tbody tr{background-color:transparent}table.dataTable tbody tr.selected>*{-webkit-box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.9);box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.9);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.9);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.9);color:rgb(255, 255, 255);color:rgb(var(--dt-row-selected-text))}table.dataTable tbody tr.selected a{color:rgb(9, 10, 11);color:rgb(var(--dt-row-selected-link))}table.dataTable tbody th,table.dataTable tbody td{padding:8px 10px}table.dataTable.row-border>tbody>tr>th,table.dataTable.row-border>tbody>tr>td,table.dataTable.display>tbody>tr>th,table.dataTable.display>tbody>tr>td{border-top:1px solid rgba(0, 0, 0, 0.15)}table.dataTable.row-border>tbody>tr:first-child>th,table.dataTable.row-border>tbody>tr:first-child>td,table.dataTable.display>tbody>tr:first-child>th,table.dataTable.display>tbody>tr:first-child>td{border-top:none}table.dataTable.row-border>tbody>tr.selected+tr.selected>td,table.dataTable.display>tbody>tr.selected+tr.selected>td{border-top-color:rgba(13, 110, 253, 0.65);border-top-color:rgba(var(--dt-row-selected), 0.65)}table.dataTable.cell-border>tbody>tr>th,table.dataTable.cell-border>tbody>tr>td{border-top:1px solid rgba(0, 0, 0, 0.15);border-right:1px solid rgba(0, 0, 0, 0.15)}table.dataTable.cell-border>tbody>tr>th:first-child,table.dataTable.cell-border>tbody>tr>td:first-child{border-left:1px solid rgba(0, 0, 0, 0.15)}table.dataTable.cell-border>tbody>tr:first-child>th,table.dataTable.cell-border>tbody>tr:first-child>td{border-top:none}table.dataTable.stripe>tbody>tr.odd>*,table.dataTable.display>tbody>tr.odd>*{-webkit-box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.023);box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.023);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.023);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-stripe), 0.023)}table.dataTable.stripe>tbody>tr.odd.selected>*,table.dataTable.display>tbody>tr.odd.selected>*{-webkit-box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.923);box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.923);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.923);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.923)}table.dataTable.hover>tbody>tr:hover>*,table.dataTable.display>tbody>tr:hover>*{-webkit-box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.035);box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.035);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.035);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.035)}table.dataTable.hover>tbody>tr.selected:hover>*,table.dataTable.display>tbody>tr.selected:hover>*{-webkit-box-shadow:inset 0 0 0 9999px #0d6efd !important;box-shadow:inset 0 0 0 9999px #0d6efd !important;-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 1) !important;box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 1) !important}table.dataTable.order-column>tbody tr>.sorting_1,table.dataTable.order-column>tbody tr>.sorting_2,table.dataTable.order-column>tbody tr>.sorting_3,table.dataTable.display>tbody tr>.sorting_1,table.dataTable.display>tbody tr>.sorting_2,table.dataTable.display>tbody tr>.sorting_3{-webkit-box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.019);box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.019);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.019);box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.019)}table.dataTable.order-column>tbody tr.selected>.sorting_1,table.dataTable.order-column>tbody tr.selected>.sorting_2,table.dataTable.order-column>tbody tr.selected>.sorting_3,table.dataTable.display>tbody tr.selected>.sorting_1,table.dataTable.display>tbody tr.selected>.sorting_2,table.dataTable.display>tbody tr.selected>.sorting_3{-webkit-box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.919);box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.919);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.919);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.919)}table.dataTable.display>tbody>tr.odd>.sorting_1,table.dataTable.order-column.stripe>tbody>tr.odd>.sorting_1{-webkit-box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.054);box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.054);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.054);box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.054)}table.dataTable.display>tbody>tr.odd>.sorting_2,table.dataTable.order-column.stripe>tbody>tr.odd>.sorting_2{-webkit-box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.047);box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.047);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.047);box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.047)}table.dataTable.display>tbody>tr.odd>.sorting_3,table.dataTable.order-column.stripe>tbody>tr.odd>.sorting_3{-webkit-box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.039);box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.039);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.039);box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.039)}table.dataTable.display>tbody>tr.odd.selected>.sorting_1,table.dataTable.order-column.stripe>tbody>tr.odd.selected>.sorting_1{-webkit-box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.954);box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.954);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.954);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.954)}table.dataTable.display>tbody>tr.odd.selected>.sorting_2,table.dataTable.order-column.stripe>tbody>tr.odd.selected>.sorting_2{-webkit-box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.947);box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.947);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.947);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.947)}table.dataTable.display>tbody>tr.odd.selected>.sorting_3,table.dataTable.order-column.stripe>tbody>tr.odd.selected>.sorting_3{-webkit-box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.939);box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.939);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.939);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.939)}table.dataTable.display>tbody>tr.even>.sorting_1,table.dataTable.order-column.stripe>tbody>tr.even>.sorting_1{-webkit-box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.019);box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.019);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.019);box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.019)}table.dataTable.display>tbody>tr.even>.sorting_2,table.dataTable.order-column.stripe>tbody>tr.even>.sorting_2{-webkit-box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.011);box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.011);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.011);box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.011)}table.dataTable.display>tbody>tr.even>.sorting_3,table.dataTable.order-column.stripe>tbody>tr.even>.sorting_3{-webkit-box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.003);box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.003);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.003);box-shadow:inset 0 0 0 9999px rgba(var(--dt-column-ordering), 0.003)}table.dataTable.display>tbody>tr.even.selected>.sorting_1,table.dataTable.order-column.stripe>tbody>tr.even.selected>.sorting_1{-webkit-box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.919);box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.919);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.919);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.919)}table.dataTable.display>tbody>tr.even.selected>.sorting_2,table.dataTable.order-column.stripe>tbody>tr.even.selected>.sorting_2{-webkit-box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.911);box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.911);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.911);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.911)}table.dataTable.display>tbody>tr.even.selected>.sorting_3,table.dataTable.order-column.stripe>tbody>tr.even.selected>.sorting_3{-webkit-box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.903);box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.903);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.903);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.903)}table.dataTable.display tbody tr:hover>.sorting_1,table.dataTable.order-column.hover tbody tr:hover>.sorting_1{-webkit-box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.082);box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.082);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.082);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.082)}table.dataTable.display tbody tr:hover>.sorting_2,table.dataTable.order-column.hover tbody tr:hover>.sorting_2{-webkit-box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.074);box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.074);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.074);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.074)}table.dataTable.display tbody tr:hover>.sorting_3,table.dataTable.order-column.hover tbody tr:hover>.sorting_3{-webkit-box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.062);box-shadow:inset 0 0 0 9999px rgba(0, 0, 0, 0.062);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.062);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-hover), 0.062)}table.dataTable.display tbody tr:hover.selected>.sorting_1,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_1{-webkit-box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.982);box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.982);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.982);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.982)}table.dataTable.display tbody tr:hover.selected>.sorting_2,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_2{-webkit-box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.974);box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.974);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.974);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.974)}table.dataTable.display tbody tr:hover.selected>.sorting_3,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_3{-webkit-box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.962);box-shadow:inset 0 0 0 9999px rgba(13, 110, 253, 0.962);-webkit-box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.962);box-shadow:inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.962)}table.dataTable.no-footer{border-bottom:1px solid rgba(0, 0, 0, 0.3)}table.dataTable.compact thead th,table.dataTable.compact thead td,table.dataTable.compact tfoot th,table.dataTable.compact tfoot td,table.dataTable.compact tbody th,table.dataTable.compact tbody td{padding:4px}table.dataTable th,table.dataTable td{-webkit-box-sizing:content-box;box-sizing:content-box}.dataTables_wrapper{position:relative;clear:both}.dataTables_wrapper .dataTables_length{float:left}.dataTables_wrapper .dataTables_length select{border:1px solid #aaa;border-radius:3px;padding:5px;background-color:transparent;color:inherit;padding:4px}.dataTables_wrapper .dataTables_filter{float:right;text-align:right}.dataTables_wrapper .dataTables_filter input{border:1px solid #aaa;border-radius:3px;padding:5px;background-color:transparent;color:inherit;margin-left:3px}.dataTables_wrapper .dataTables_info{clear:both;float:left;padding-top:.755em}.dataTables_wrapper .dataTables_paginate{float:right;text-align:right;padding-top:.25em}.dataTables_wrapper .dataTables_paginate .paginate_button{-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;min-width:1.5em;padding:.5em 1em;margin-left:2px;text-align:center;text-decoration:none !important;cursor:pointer;color:inherit !important;border:1px solid transparent;border-radius:2px;background:transparent}.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{color:inherit !important;border:1px solid rgba(0, 0, 0, 0.3);background-color:rgba(0, 0, 0, 0.05);background:-webkit-gradient(linear, left top, left bottom, from(rgba(230, 230, 230, 0.05)), to(rgba(0, 0, 0, 0.05)));background:linear-gradient(to bottom, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{cursor:default;color:#666 !important;border:1px solid transparent;background:transparent;-webkit-box-shadow:none;box-shadow:none}.dataTables_wrapper .dataTables_paginate .paginate_button:hover{color:white !important;border:1px solid #111;background-color:#111;background:-webkit-gradient(linear, left top, left bottom, from(#585858), to(#111));background:linear-gradient(to bottom, #585858 0%, #111 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button:active{outline:none;background-color:#0c0c0c;background:-webkit-gradient(linear, left top, left bottom, from(#2b2b2b), to(#0c0c0c));background:linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);-webkit-box-shadow:inset 0 0 3px #111;box-shadow:inset 0 0 3px #111}.dataTables_wrapper .dataTables_paginate .ellipsis{padding:0 1em}.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_processing,.dataTables_wrapper .dataTables_paginate{color:inherit}.dataTables_wrapper .dataTables_scroll{clear:both}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody{-webkit-overflow-scrolling:touch}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>th,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>td,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>th,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>td{vertical-align:middle}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>th>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>td>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>th>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>td>div.dataTables_sizing{height:0;overflow:hidden;margin:0 !important;padding:0 !important}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:1px solid rgba(0, 0, 0, 0.3)}.dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,.dataTables_wrapper.no-footer div.dataTables_scrollBody>table{border-bottom:none}.dataTables_wrapper:after{visibility:hidden;display:block;content:"";clear:both;height:0}@media screen and (max-width: 767px){.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{float:none;text-align:center}.dataTables_wrapper .dataTables_paginate{margin-top:.5em}}@media screen and (max-width: 640px){.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter{float:none;text-align:center}.dataTables_wrapper .dataTables_filter{margin-top:.5em}}html.dark{--dt-row-hover: 255, 255, 255;--dt-row-stripe: 255, 255, 255;--dt-column-ordering: 255, 255, 255}html.dark table.dataTable>thead>tr>th,html.dark table.dataTable>thead>tr>td{border-bottom:1px solid rgb(89, 91, 94)}html.dark table.dataTable>thead>tr>th:active,html.dark table.dataTable>thead>tr>td:active{outline:none}html.dark table.dataTable>tfoot>tr>th,html.dark table.dataTable>tfoot>tr>td{border-top:1px solid rgb(89, 91, 94)}html.dark table.dataTable.row-border>tbody>tr>th,html.dark table.dataTable.row-border>tbody>tr>td,html.dark table.dataTable.display>tbody>tr>th,html.dark table.dataTable.display>tbody>tr>td{border-top:1px solid rgb(64, 67, 70)}html.dark table.dataTable.row-border>tbody>tr.selected+tr.selected>td,html.dark table.dataTable.display>tbody>tr.selected+tr.selected>td{border-top-color:rgba(13, 110, 253, 0.65);border-top-color:rgba(var(--dt-row-selected), 0.65)}html.dark table.dataTable.cell-border>tbody>tr>th,html.dark table.dataTable.cell-border>tbody>tr>td{border-top:1px solid rgb(64, 67, 70);border-right:1px solid rgb(64, 67, 70)}html.dark table.dataTable.cell-border>tbody>tr>th:first-child,html.dark table.dataTable.cell-border>tbody>tr>td:first-child{border-left:1px solid rgb(64, 67, 70)}html.dark .dataTables_wrapper .dataTables_filter input,html.dark .dataTables_wrapper .dataTables_length select{border:1px solid rgba(255, 255, 255, 0.2);background-color:var(--dt-html-background)}html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{border:1px solid rgb(89, 91, 94);background:rgba(255, 255, 255, 0.15)}html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{color:#666 !important}html.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover{border:1px solid rgb(53, 53, 53);background:rgb(53, 53, 53)}html.dark .dataTables_wrapper .dataTables_paginate .paginate_button:active{background:#3a3a3a}