@import "https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900";
@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

:root {
  --primary-color: #fe5722;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background: #f5f5f5 !important;
  color: #000000;
  font-family: 'Inter', 'Lato', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  min-height: 100%;
}

/* Global Inter font override for MUI components */
.MuiTypography-root,
.MuiButton-root,
.MuiInputBase-root,
.MuiMenuItem-root,
.MuiListItemText-root div,
.MuiTab-root,
.MuiChip-root {
  font-family: 'Inter', 'Lato', sans-serif !important;
}

a {
  color: #337ab7;
  text-decoration: none;
}

h2,
.TitleList .Title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1em;
}

p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 1em;
}
.summary-date {
  font-size: 14px;
}
.Header {
  height: "80px";
  background: transparent;
  color: #9ee5ee;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px;
  top: 0;
  left: 0;
  width: 100vw;
  box-sizing: border-box;
  z-index: 5;
}

.rdi-red {
  color: #ff0000;
}

.rdi-black {
  color: #717171;
}

.rdi-green {
  color: #228b22;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px rgba(128, 128, 128, 0.1);
  border-radius: 5px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.3) !important;
  opacity: 0.2 !important;
  border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, 0.7) !important;
  opacity: 0.5 !important;
}

::-webkit-scrollbar-track:hover {
  background: rgba(128, 128, 128, 0.3) !important;
}

#filter-sub-menu::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px rgba(128, 128, 128, 0.52) !important;
  border-radius: 5px;
  background-color: #5a5a5a !important;
}

#filter-sub-menu::-webkit-scrollbar {
  width: 8px;
  background-color: #5a5a5a !important;
}

#filter-sub-menu::-webkit-scrollbar-thumb {
  border-radius: 5px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3) !important;
  background-color: #333333 !important;
}

.fr-block {
  display: block !important;
}

.fr-none {
  display: none;
}

@supports not (overflow-x: overlay) {
  .overflow-x {
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 5px;
  }

  .overflow-x:hover {
    overflow-x: auto;
    overflow-y: hidden;
  }
}

@supports (overflow-x: overlay) {
  .overflow-x {
    white-space: nowrap;
    overflow: hidden;
    padding-bottom: 10px;
  }

  .overflow-x:hover {
    overflow-x: overlay;
    overflow-y: hidden;
  }
}

.overflow-x::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  padding: none;
}

.overflow-x::-webkit-scrollbar-track {
  border-radius: 5px;
  background: rgba(247, 87, 35, 0.1);
}

.overflow-x::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: rgba(247, 87, 35, 0.3);
}

.overflow-x::-webkit-scrollbar-track:hover {
  background: rgba(247, 87, 35, 0.3);
}

.overflow-x::-webkit-scrollbar-thumb:hover {
  background: rgba(247, 87, 35, 0.7);
}

.fa-gear:before,
.fa-cog:before {
  content: "\f013";
  font-size: 14px !important;
}

.sf-form-control {
  background: #fff;
}

.sf-select-height {
  height: 47 !important;
}

.SF-float-right {
  align-items: center !important;
  float: right !important;
  right: 0;
  position: absolute !important;
}

input.flatpickr-on-a-popover.flatpickr-input {
  display: none;
}

.open .flatpickr-calendar {
  z-index: 1500;
}

.flatpickr-calendar {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.flatpickr-calendar.inline {
  top: 0px !important;
}

.app_task_Header_fontsize {
  font-size: 14 !important;
}

.flatpickr-wrapper {
  display: contents !important;
}

.flatpickr-innerContainer {
  display: contents !important;
}

.flatpickr-calendar.hasTime.animate.inline {
  width: 100%;
}

.SF-text-white {
  color: white !important;
}

/*---Form_Builder-------------------------------*/
.add_new_field_btn {
  width: 477px;
  background-color: #22b24b;
  border: 0.5px solid #038e2a;
  border-radius: 0px;
  outline: none;
  height: 45px;
}

#sf_auto_field {
  height: auto;
}

#form_field {
  height: auto;
}

#check_box {
  margin-top: 2px;
}

.opt_in_check_box {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
  font-size: 13px;
}

.form-control {
  height: 40px !important;
  width: 257px !important;
}

.react-tel-input {
  margin-top: 0px !important;
  margin-left: 0px !important;
}

.flag-dropdown {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.landing_page_text_area {
  width: 425px;
  height: 40px;
  display: "block";
  padding: "6px 12px";
  line-height: "1.42857143";
  color: "#555";
  background-color: "#fff";
  border: "1px solid #ccc";
  border-radius: "4px";
  box-shadow: "inset 0 1px 1px rgb(0 0 0 / 8%)";
}

.input_txtField {
  width: 425px;
  height: 40px;
  display: block;
  padding: 6px 12px;
  line-height: 1.42857143;
  margin-top: 8px;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
}

.input_txtField:focus {
  outline-color: lightblue !important;
  box-shadow: 0 0 10px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

.custom_field_row {
  border: 5px solid #e0e0e0;
  margin-bottom: 20px;
  background: #fff;
}

.heading_row {
  background-color: #e0e0e0;
  padding: 6px 8px;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
}

.body_panel {
  padding: 0 15px;
}

.radio-group {
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  position: relative;
  width: 112px;
  white-space: nowrap;
}

.active-radio {
  background-color: #e0e0e0;
  padding: 0px 15px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.inactive_radio {
  overflow: hidden;
  position: relative;
  padding: 0px 15px;
  white-space: nowrap;
  display: inline-block;
  background-color: white;
}

.input_txt_field {
  width: 425px;
  display: block;
  padding: 6px 12px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  font-weight: 500;
}

.input_txt_field:focus {
  outline-color: lightblue !important;
  box-shadow: 0 0 50px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 2px 1px 1px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

/*--------------------------------------------------------- navbr ---------------------------------------------------------*/

.appheader {
  width: calc(100% + 4px);
}

.headingApp > div > div {
  color: #1a1917 !important;
}

.headingApp > div > div a {
  height: 30px !important;
  line-height: 30px !important;
  border: 0;
}

.headingApp > div > div > i {
  color: var(--primary-color, #2563eb) !important;
  background-color: color-mix(in srgb, var(--primary-color, #2563eb) 10%, white) !important;
  border-radius: 10px !important;
  width: 38px !important;
  height: 38px !important;
  text-align: center;
  top: 0 !important;
  position: relative;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  margin: 0 10px 0 0 !important;
  float: none !important;
}

.headingApp > div > div a i {
  font-size: 15px !important;
}

/*-------------------------------------------------- advanced-search ---------------------------------------------------------*/

.advanced-search {
  position: absolute;
  background: white;
  z-index: 1300;
  top: 50;
  width: 100%;
  color: #2e2d2d;
  border-radius: 5px;
  box-shadow:
    rgb(0 0 0 / 16%) 0px 3px 10px,
    rgb(0 0 0 / 23%) 0px 3px 10px;
}

.sf-dialog-content {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.6);
  padding: 0px 24px 24px;
  box-sizing: border-box;
  overflow-y: hidden;
  border: none;
}

/*-----------------------------swal modal------------------------------------*/

.swal2-container {
  z-index: 1000000 !important;
}

h2#swal2-title.sf-swal-title {
  font-size: 22px;
  font-weight: 400;
  padding-left: 2px;
  margin-top: 5px;
  display: block;
  text-align: start;
  margin-left: 22px;
  line-height: 32px;
  color: rgba(0, 0, 0, 0.87);
}

div#swal2-html-container.sf-swal-html-container {
  font-size: 16px;
  display: block;
  justify-content: initial;
  text-align: start;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  height: auto;
  max-height: 500px !important;
}

.swal2-actions {
  width: 100% !important;
}

.swal2-popup .swal2-styled.sf-swal-cancel-btn {
  margin-left: 70%;
  padding: 5px 24px;
  background-color: #fff !important;
  color: #000;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  /* border: hidden; */
  /* outline: none;  */
}

.swal2-popup .swal2-styled.sf-swal-cancel-btn:hover {
  background-color: #fcfcfc !important;
}

.swal2-popup.swal2-modal.sf-swal-popup {
  height: 174px;
}

button.swal2-cancel.sf-swal-ok-btn.swal2-styled {
  padding: 5px 16px;
  background-color: #fff;
  color: black;
  margin-top: 0px;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
}

.swal2-popup .swal2-styled:focus {
  box-shadow: none !important;
}

.swal2-popup.swal2-modal.sf-swal-popup.swal2-show {
  height: auto;
  min-height: 150px !important;
  max-height: 500px !important;
}

.sf-sffrom-search,
.sf-search-icon-margin-right-expand {
  position: absolute;
  right: 12px;
  bottom: 11px; /* centers a ~14px icon within the 36px input height */
  cursor: pointer;
  color: #888;
  font-size: 13px;
  z-index: 1;
  margin-right: 0;
}

/* Add right padding on lookup fields to prevent text overlapping the search icon */
.form-field-search-icon .MuiInputBase-input {
  padding-right: 32px !important;
}

[class*="input-text-autocomplete-"] .MuiInputBase-input {
  padding-right: 32px !important;
}

/*---------------- logo -------------------*/
.Logo {
  width: 151px;
  height: 41px;
  margin-right: 10px;
  -webkit-transition: margin 0.125s ease;
  transition: margin 0.125s ease;
}

.Logo svg {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.Logo svg path {
  fill: #ffffff;
  -webkit-transition: fill 0.125s ease;
  transition: fill 0.125s ease;
}

.Logo:hover {
  cursor: pointer;
  margin-top: 2px;
}

.Logo:hover svg path {
  fill: #ffffff !important;
}

/*----------------user profile-------------------*/

.UserProfile {
  margin-left: auto;
}

.UserProfile .User {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.UserProfile .User .image {
  border-radius: 50%;
  margin-left: 10px;
  overflow: hidden;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  border: 3px solid transparent;
  -webkit-transition: border 0.125s ease;
  transition: border 0.125s ease;
}

.UserProfile .User .image img {
  width: 34px;
  height: 34px;
  display: block;
}

.UserProfile .User .name {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 13px;
  font-weight: 300;
  height: 44px;
  color: #717171;
}

.UserProfile .User:hover {
  cursor: pointer;
}

.UserProfile .User:hover .image {
  border: 3px solid #efefef;
}

.UserProfile .UserProfile-menu {
  display: none;
}

/* ── PROFILE DROPDOWN MENU ─────────────────────────── */
.sf-profile-dropdown .MuiPaper-root {
  min-width: 180px !important;
  border-radius: 10px !important;
  text-align: left !important;
}
.sf-profile-dropdown .MuiList-root {
  padding: 6px 0 !important;
  text-align: left !important;
}
.sf-profile-menu-name.MuiMenuItem-root {
  padding: 10px 16px 8px !important;
  cursor: default !important;
  pointer-events: none !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
.sf-profile-menu-name.MuiMenuItem-root span {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1A1917 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 160px !important;
}
.sf-profile-menu-divider.MuiDivider-root {
  margin: 2px 12px 4px !important;
  border-color: #ECEEF1 !important;
}
.sf-profile-menu-item.MuiMenuItem-root {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  color: #4B5563 !important;
  border-radius: 6px !important;
  /* margin: 2px 6px !important; */
  transition: all 0.15s !important;
  min-height: auto !important;
  text-align: left !important;
}
.sf-profile-menu-item.MuiMenuItem-root:hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 8%, white) !important;
  color: var(--primary-color, #2563EB) !important;
}
.sf-profile-menu-item.MuiMenuItem-root span {
  font-size: 13px !important;
  font-weight: 500 !important;
}
.sf-profile-menu-icon.MuiIcon-root {
  font-size: 18px !important;
  color: #9CA3AF !important;
  transition: color 0.15s !important;
}
.sf-profile-menu-item.MuiMenuItem-root:hover .sf-profile-menu-icon.MuiIcon-root {
  color: var(--primary-color, #2563EB) !important;
}
/* Sign out — red accent */
.sf-profile-menu-signout.MuiMenuItem-root:hover {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
}
.sf-profile-menu-signout.MuiMenuItem-root:hover .sf-profile-menu-icon.MuiIcon-root {
  color: #DC2626 !important;
}

/*--------------------navbar search---------------------------*/

.Search {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: flex-end;
  width: 60%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* pointer-events: none;   */
  float: right;
}

.Search input {
  /*margin-left: 50px;*/
  /*font-weight: bolder;*/
  font-size: 12px;
  height: 35px;
  width: 25%;
  background: #efefef;
  color: #888;
  border: 1px solid #d3d6d6;
  margin-top: -8px !important;
  border-radius: 20px;
  outline: none;
  padding: 0 17px;
  line-height: 1;
  pointer-events: all;
  -webkit-transition:
    border 0.25s ease,
    width 0.125s ease 0.125s;
  transition:
    border 0.25s ease,
    width 0.125s ease 0.125s;
}

.Search input:focus {
  border: 1px solid #d3d6d6;
}

.Search i {
  position: relative;
  color: #ccc;
  font-size: 18px;
  left: -28px;
  margin-top: -6px !important;
}

.input_search {
  width: 100% !important;
}

.input_search input {
  margin-left: 0 !important;
  width: 86% !important;
}

.Search input {
  font-size: 12px;
  height: 38px;
  width: 400;
  max-width: 400px;
}

/*---------------header menue----------------------*/
.contentHeader > div > div > div {
  background: inherit !important;
}

/*------------------------ calender --------------------*/
.user-color-box {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  margin-right: 5px;
}

.e-date-header-container {
  overflow-y: scroll;
  max-height: 200px;
  padding: 0px !important;
  border-bottom: 1px solid #aeaeae42;
}

.e-schedule .e-vertical-view .e-left-indent {
    width: 55px !important;
}

.e-left-indent-wrap {
  max-height: 200px;
  padding: 0px !important;
  overflow: hidden;
  border-bottom: 1px solid #aeaeae42;
}

.e-all-day-appointment-section.e-icons {
  position: absolute;
  top: 0;
}

.e-headerchkcelldiv {
  padding: 5px 1.8em 2px 0.8em !important;
  overflow: visible !important;
}

.e-more-indicator {
  background: #fff;
  height: 40;
  padding-top: 15px;
}

.e-icons.e-edit:before {
  content: "" !important;
}

.e-more-indicator {
  height: 15px;
}

.e-list-text {
  border: 0px !important;
}

img.resource-details {
  height: 45;
  border-radius: 50%;
  width: 45;
  min-width: 40 !important;
  min-height: 40 !important;
}

/*------------------------------------------------- drawer --------------------------------------------------------*/

.drawer {
  padding-top: 10px;
}

.sf-call-drawer-backdrop {
  position:fixed;inset:0;z-index:1299;
  background:rgba(0,0,0,0);
  transition: background 225ms cubic-bezier(0,0,0.2,1);
  pointer-events: none;
}
.sf-call-drawer-backdrop.sf-drawer-open {
  background:rgba(0,0,0,.28);
  pointer-events: auto;
}
.sf-call-drawer {
  position: fixed;
  top: 0;
  z-index: 1300 !important;
  background: #FFFFFF;
  right: 0;
  box-shadow: -6px 0 24px rgba(0,0,0,.1);
  transform: translateX(100%);
  transition: transform 225ms cubic-bezier(0,0,0.2,1);
}
.sf-call-drawer.sf-drawer-open {
  transform: translateX(0);
}

.sf-call-drawer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--module-color, #374151);
  padding: 0 18px;
  height: 52px;
  flex-shrink: 0;
}

.sf-call-drawer-body {
  height: 100%;
  background-color: #FFFFFF;
}

.sf-drawer-title {
  font-size: 25px;
  display: flex;
}

.sf-call-drawer-button-right {
  float: right;
  right: 0;
  position: absolute;
}

.sf-disconnect-button {
  background: rgb(255, 255, 255);
  padding: 1 6;
  border-radius: 4px;
}

.alignleft {
  text-align: left;
  width: 25%;
}

.aligncenter {
  text-align: center;
  width: 50%;
}

.alignright {
  text-align: right;
  width: 25%;
}

.Navigation ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 37px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0 30px;
}

.Navigation ul li {
  font-weight: 400;
  padding: 7px 10px;
  font-size: 14px;
  -webkit-transition: background 0.125s ease;
  transition: background 0.125s ease;
  border-radius: 3px;
}

.Navigation ul li:hover {
  color: #ffffff;
  cursor: pointer;
}

/*-------------------- card --------------------------*/
.card {
  border: 1px solid;
  border-radius: 5px;
  border-color: #eeeeee;
  background-color: #ffffff;
  box-shadow: 0px 0px 5px rgb(200 200 200 / 50%);
}

.card-header {
  display: grid;
  padding: 10px;
  border-bottom: 1px solid #eeeeee;
  background-color: #ffffff;
}

.card-body {
  display: grid;
  padding: 10px;
  background-color: #ffffff;
}

/*--------------------------- filter ---------------------------------------*/
.filist .anchor {
  display: none;
  font-weight: 400 !important;
  color: #717171 !important;
}

.filist:hover .anchor {
  display: inline-block;
  font-weight: 400 !important;
  color: #717171 !important;
}

.filter-menu > div > a > div:hover {
  background-color: #515151 !important;
}

.filter-sub-menu {
  background-color: #414141;
  color: #ffffff !important;
  z-index: 99999 !important;
  position: absolute;
  display: inline-block;
  max-height: 500px;
  overflow: auto;
  scrollbar-color: #515151 #515151;
}

.groupList .anchor {
  display: none;
}

.groupList:hover .anchor {
  display: inline-block;
}
.report-row-text:hover {
  text-decoration: underline;
  cursor: pointer;
}
.report-row-text {
  font-size: 14px;
  line-height: 32px;
  color: black;
  font-weight: 400;
}
/*-------------------------- sub menue--------------------------------*/
.sbbmenu a {
  white-space: nowrap;
  width: 230px;
  display: block;
  padding: 8px 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255,255,255,0.65) !important;
  text-decoration: none !important;
}

.sbbmenu a:hover {
   background-color: rgba(255,255,255,0.15) !important;
}

.sbbmenu a span {
  color: rgba(255,255,255,0.65) !important;
}

.sbbmenuheader span {
  white-space: nowrap;
  width: 225px;
  display: block;
  padding: 8px 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff!important;
  text-decoration: none !important;
}

/*------------------------------------  data view  -----------------------------------*/

.headerDetailView {
  background: transparent !important;
  padding: 4px 0 !important;
  box-shadow: none !important;
  width: 100% !important;
}

.headerDetailView > div {
  border-bottom: 0 !important;
}

/* Old detail view icon — now overridden by sf-dv-header styles below */
.headerDetailView > div > div > span > i {
  color: var(--primary-color, #2563EB) !important;
  font-size: 18px !important;
  border-radius: 0 !important;
  width: auto !important;
  text-align: center;
  height: auto !important;
  top: auto !important;
  position: static !important;
  line-height: 1 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  background-color: transparent !important;
}

.pag {
  /* position: absolute; */
  float: right;
  right: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.pag > div:first-child {
  margin-right: 25px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.pageSet {
  /* position: absolute; */
  top: 2px;
  right: 0;
}

.pageSetColumnView {
  top: 6px;
  right: 0;
}

.pageSet i {
  opacity: 0.5 !important;
  font-size: 16px !important;
}

.pageSetColumnView i {
  opacity: 0.5 !important;
  font-size: 16px !important;
}

.desk {
  border-radius: 6px !important;
}

.desk-head {
  border-bottom: 1px solid #e3dada;
}

.desk-items-gray {
  background: #f5f5f5;
}

.dialogtxt {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 5px;
}

.desk-name {
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.MuiInputBase-root.MuiOutlinedInput-root.sf-pagenation.MuiInputBase-formControl
  > svg {
  display: none;
}
.MuiFormControl-root.MuiFormControl-marginDense.MuiTextField-root.Text_select
  > label {
  padding-right: 15px;
}
.MuiFormControl-root.MuiTextField-root.dropdownwiththreeinput > label {
  padding-right: 15px;
}

.MuiFormControl-root.MuiTextField-root.dropdownwithinput > label {
  padding-right: 15px;
}

.sf-page-item-no > div > div {
  padding-right: 13px !important;
}

.detailViewFieldDataLabel {
  width: calc(100% - 30px);
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.detailViewFieldDataLabel2 {
  width: calc(100% - 45px);
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 228px;
  color: #b5b5b5;
  text-transform: uppercase !important;
  padding-top: 5px;
}

.detailViewFieldData2 {
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.detailViewFieldDataLabel1 {
  width: calc(100% - 30px);
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
}

.detailViewFieldData > .detailViewFields_hover::after {
  clear: both;
  display: block;
  content: "";
  height: 0;
}

.detailViewFieldData {
  margin-bottom: 10px;
}

.detailViewFieldDataLabel {
  font-weight: bold;
}

.detailViewFields_hover i {
  display: none;
}

.detailViewFields_hover:hover i {
  display: inline !important;
}

.detailViewFields_hover i.fa-phone,
.detailViewFields_hover i.fa-mobile {
  display: inline !important;
}

/*------------------- login ----------------------*/
.sf-login-Typography.MuiTypography-body1 {
  font-size: 24px;
  padding: 16px;
  line-height: 19px;
  padding-left: 1px;
  color: #333333;
}

.sf-email-adr {
  height: 72px;
  margin-top: 17px;
}

/*-------------------- library ------------------*/

.treeviewdiv {
  display: flex;
}

.iconContent {
  line-height: 1;
  padding: 5;
}

.e-treeview .e-list-item.e-active > .e-fullrow {
  background-color: transparent !important;
  border-color: transparent !important;
}

.dlimg {
  padding: 5;
  height: 75px !important;
  object-fit: contain;
}

.dlimg-card {
  padding: 5;
  height: 100px !important;
  object-fit: contain;
}

.dlcard {
  height: 75px !important;
}

.dlimg1 {
  padding: 5;
  height: 150px !important;
  object-fit: contain;
  border-radius: 5px;
}

.dlcard1 {
  height: 150px !important;
}

.assets-search:focus {
  outline: none !important;
  border: 0px solid red;
}

.rc-tree .rc-tree-treenode.drop-target {
  background-color: transparent !important;
}
/*----------------- useFullLinks ------------------*/
#sf_select_fields {
  height: 20px;
}

/*-------------------- report -------------------*/

.data_less {
  text-align: center;
  font-size: 14px;
  color: #868686;
  margin-top: 135px;
}

/*---------------------------Broadcast Results---------------------------*/
.report_box_area {
  display: block;
  width: 100%;
  margin-top: -10px;
}

.report_box {
  float: left;
  position: relative;
  display: block;
  width: 10%;
  padding: 1%;
  background-color: #ffffff;
  color: #000000;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  text-align: center;
  font-size: 13px;
}

.report_gap {
  float: left;
  display: block;
  width: 2.4%;
  height: 50px;
}

/*----------------- other ------------------*/
.MuiBackdrop-root {
  background-color: rgb(0 0 0 / 0%) !important;
}

.MuiDialog-root > .MuiBackdrop-root {
  background-color: #00000061 !important;
}

/* ── GENERIC DIALOG STYLING — Enterprise Design ─────── */
.MuiDialog-root .MuiPaper-root {
  border-radius: 12px !important;
  overflow: hidden !important;
}
.MuiDialog-root .MuiDialogTitle-root {
  background: var(--module-color, #374151) !important;
  padding: 0 20px !important;
  height: 48px !important;
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 0 !important;
  color: #FFFFFF !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}
.MuiDialog-root .MuiDialogTitle-root .sf-dialog-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}
.MuiDialog-root .MuiDialogTitle-root .sf-dialog-title > div:first-child {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  margin-left: 0 !important;
}
.MuiDialog-root .MuiDialogTitle-root .sf-dialog-title .pull-right .MuiIconButton-root {
  color: rgba(255,255,255,1) !important;
  background: rgba(255,255,255,0.15) !important;
  border-radius: 6px !important;
  width: 25px !important;
  height: 24px !important;
  padding: 0 !important;
}

.MuiDialog-root .MuiDialogTitle-root .sf-dialog-title .pull-right .MuiIconButton-root:hover {
  background: rgba(255,255,255,0.25) !important;
  color: #FFFFFF !important;
}

.MuiDialog-root .MuiDialogTitle-root .sf-dialog-title .pull-right .MuiIconButton-root .MuiIcon-root {
  font-size: 11px !important;
}

.MuiDialog-root .MuiDialogContent-root {
  background: #FFFFFF !important;
}

.MuiTabs-root {
  min-height: 40px !important;
}

.MuiTabs-flexContainer {
  height: 40px;
}
#MinFailureCount {
  height: 14px;
}

.MuiToolbar-regular {
  min-height: 50px !important;
  box-shadow: "none" !important;
  padding-left: 0px !important;
}

.MuiOutlinedInput-root {
  background: white;
}

.MuiListItemText-primary {
  font-size: 14px !important;
  line-height: 16px !important;
  width: max-content !important;
}


.fr-box.fr-basic .fr-wrapper {
  border-radius: 0 0 10px 10px;
}

.mySelect-dashboard[class*="-container"] {
  padding: 2px !important;
}

.kanbanBord {
  /* padding: 10px 10px; */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  margin-left: 10px;
}

.desk,
.desk-placeholder,
.desk-placeholder:hover {
  width: 200px;
  display: inline-block;
  height: 100%;
  overflow: hidden;
  min-height: 30px;
  background-color: #ffffff;
  box-shadow: 1px 1px 1px 1px #dddddd;
  border-radius: 3px;
  padding-bottom: 50px;
  margin-right: 15px;
  margin-bottom: 10px;
  vertical-align: top;
}

.desk .desk-head,
.desk-placeholder .desk-head,
.desk-placeholder:hover .desk-head {
  position: relative;
  padding: 10px 8px;
  width: 100%;
  background: #ffffff;
  color: #212121;
  margin-left: 0;
  margin-top: 0;
  height: 45px;
}

.desk .desk-head .desk-name,
.desk-placeholder .desk-head .desk-name,
.desk-placeholder:hover .desk-head .desk-name {
  font-weight: bold;
  white-space: normal;
  width: 100%;
  text-align: center;
}

.desk-items {
  overflow-y: auto;
  height: calc(100% - 9px);
  padding-bottom: 0;
}

.desk-items .placeholder,
.placeholder:hover {
  height: 150px;
  background-color: rgba(208, 208, 208, 1);
}

.item {
  width: 100%;
  border-bottom: 1px solid #dbdbdb;
  margin-left: 0px;
  padding-left: 5px;
  padding-top: 10px;
  background: #fff;
  transition: 0.15s;
}

.item:hover {
  background: #f7f7f7;
}

.item .item-name {
  word-break: break-all;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.item .item-container {
  height: 140px;
}

.item .item-container .item-avatar-wrap {
  width: 70px;
  float: left;
  margin-bottom: 5px;
}

.item .item-container .item-avatar-wrap img {
  width: 50px;
  height: 50px;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  border: 1px solid #dbdbdb;
}

.item .item-container .item-content {
  white-space: normal;
}

.item .item-container .item-content .item-author {
  font-size: 16px;
  font-weight: bolder;
}

.item .item-container .item-content .item-author p {
  margin: 5px 0;
}

.custom-textarea {
  border: 0;
  text-align: center;
  display: inline-table;
  color: rgb(113, 113, 113) !important;
  background: transparent !important;
  font-size: 12px !important;
  font-family: "Lato";
}

div#calendarsetupcheck > div > div {
  font-size: 15px;
  margin-top: 7px;
  color: #333;
}

/*-------------------- Drawer ------------------*/

.minimized-mail-bar {
  box-sizing: border-box;
  font-family: Arial;
  box-shadow:
    rgb(0 0 0 / 16%) 0px 3px 10px,
    rgb(0 0 0 / 23%) 0px 3px 10px;
  width: 17%;
  position: fixed;
  z-index: 1500;
  left: auto;
  right: 0px;
  bottom: 0px;
  overflow: hidden;
  border-radius: 5px 5px 0px 0px;
  margin: 0px !important;
}

.date-label {
  position: absolute;
  line-height: 22px;
  top: 38px !important;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  z-index: 1;
  transform: scale(1) translate(0px, 0px);
  transform-origin: left top 0px;
  pointer-events: none;
  color: rgb(113, 113, 113);
  font-weight: normal;
  font-size: 16px;
  -moz-user-select: none;
  user-select: none;
  color: #999 !important;
  padding-left: 7px !important;
}

.label-top .date-label {
  transform: scale(0.75) translate(0px, -28px) !important;
  position: absolute;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

.date-label {
  position: relative;
  line-height: 0;
  top: 30px !important;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  z-index: 1;
  transform: scale(1) translate(0px, 0px);
  transform-origin: left top 0px;
  pointer-events: none;
  user-select: none;
  color: rgb(113, 113, 113);
  font-weight: normal;
  font-size: 16px;
  padding-left: 8px;
  display: initial;
}

.sf-form-field .rdtOpen input:focus .date-label {
  /*border:1px solid #c00 !important;*/
  font-size: 12px !important;
  color: #c00 !important;
}

.col-two > div > label.date-label {
  top: 30px !important;
}

.col-two > div > input {
  font-size: 15px !important;
  color: #333 !important;
  padding-top: 5px !important;
  padding-left: 7px !important;
}

.col-two > div {
  padding: 0px !important;
}

.col-two > div {
  font-size: 16px !important;
  color: #333 !important;
}

.col-two > div > div {
  font-size: 12px !important;
  color: #999 !important;
}

.colTwo > div {
  width: 100%;
  display: inline-block;
  position: relative;
  transition: height 200ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  cursor: auto;
  margin-bottom: 10px;
}

.sf-form-field1 > div {
  background-color: #fff !important;
  padding-left: 7px !important;
  margin-bottom: 10px !important;
}

.sf-form-field > div > label {
  color: #777 !important;
}

.sf-form-field > div > input {
  color: #444 !important;
  font-size: 16px !important;
}

.sf-atc-autoComplete-text-field > div {
  height: 44px;
}

.sf-atc-autoComplete > .MuiFormControl-marginDense {
  margin-top: 0;
  margin-bottom: 4px;
}

.dpvalue {
  padding-left: 17px;
}

.quote-table {
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.css-jcseh-MuiButtonBase-root-MuiMenuItem-root.Mui-selected {
  background-color: #f0f0f0;
}

.sf-testbox-height {
  height: 39px;
}

.layout_maintable {
  background-color: #fff;

  width: 100%;
}

.layout_maintable th {
  background-color: #fff;
  border-left: 1px solid #ddd;
  padding-left: 10px;
  border-bottom: 1px solid #ddd;
  padding: 8px 10px;
  font-weight: bold;
  font-size: 14px;
}

.layout_maintable td {
  font-size: 14px;
  color: #666;
  border-bottom: 1px solid #ddd;
  line-height: 28px;
  padding-left: 10px;
}

.layout_maintable tbody tr:nth-of-type(even) {
  background-color: #f2f2f0;
}

.draggable-search-root {
  background-color: #fff;
}

.draggable-search-input:focus {
  border: 0px !important;
}

.draggable-search-input:focus-visible {
  outline: 0px;
  border-radius: 0px;
}

/* ═══════════════════════════════════════════════════════════
   GROUP DETAIL VIEW — Redesigned Layout
   ═══════════════════════════════════════════════════════════ */

/* ── Content area ── */
.sf-grp-content { flex: 1; padding: 14px 20px 14px; min-width: 0; overflow-y: auto; }

/* ── Page Header ── */
.sf-grp-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sf-grp-page-title-group { display: flex; align-items: center; gap: 10px; }
.sf-grp-page-icon { width: 36px; height: 36px; border-radius: 9px; background: #EEF3FF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sf-grp-page-title { font-size: 18px; font-weight: 600; letter-spacing: -0.3px; color: #1A1917; }
.sf-grp-page-subtitle { font-size: 12px; color: #A8A49C; margin-top: 1px; }
.sf-grp-page-actions { display: flex; align-items: center; gap: 8px; }

/* ── Buttons ── */
.sf-grp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 7px; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; transition: all 0.15s; border: none; outline: none; }
.sf-grp-btn-ghost { background: #FFFFFF; color: #706D65; border: 1px solid #DDE0E5; }
.sf-grp-btn-ghost:hover { background: #ECEEF1; }
.sf-grp-btn-danger { background: #FFF5F5; color: #DC2626; border: 1px solid #FCA5A5; }
.sf-grp-btn-danger:hover { background: #FEE2E2; }

/* ── Panel grid (2-column) ── */
.sf-grp-panel-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: start; }

/* ── Card ── */
.sf-grp-card { background: #FFFFFF; border: 1px solid #DDE0E5; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); }
.sf-grp-card-header { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid #E8EAED; }
.sf-grp-card-title { font-size: 12px; font-weight: 600; color: #706D65; text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; gap: 6px; }
.sf-grp-card-title svg { color: #A8A49C; }
.sf-grp-card-body { padding: 14px 16px; }

/* ── Edit Group Form ── */
.sf-grp-fsec { padding: 14px 16px 14px; }
.sf-grp-frow { margin-bottom: 12px; }
.sf-grp-frow:last-child { margin-bottom: 0; }
.sf-grp-flabel { display: block; font-size: 12px; font-weight: 500; color: #706D65; margin-bottom: 4px; }
.sf-grp-freq { color: #DC2626; }
.sf-grp-finput, .sf-grp-fselect, .sf-grp-ftextarea { width: 100%; padding: 7px 10px; border: 1px solid #DDE0E5; border-radius: 6px; font-size: 13px; font-family: inherit; color: #1A1917; background: #FFFFFF; outline: none; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; }
.sf-grp-finput:focus, .sf-grp-fselect:focus, .sf-grp-ftextarea:focus { border-color: var(--primary-color, #2563EB); box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
.sf-grp-ftextarea { resize: vertical; min-height: 68px; line-height: 1.5; }
.sf-grp-fselect { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23A8A49C' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
.sf-grp-finput-ro, .sf-grp-finput[readonly], .sf-grp-ftextarea[readonly], .sf-grp-fselect:disabled { background: #ECEEF1; color: #A8A49C; cursor: not-allowed; opacity: 0.7; }
/* ── Status radio options ── */
.sf-grp-status-opts { display: flex; gap: 8px; }
.sf-grp-status-opt { flex: 1; position: relative; }
.sf-grp-status-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.sf-grp-status-opt label { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 0; border: 1px solid #DDE0E5; border-radius: 6px; font-size: 12.5px; font-weight: 500; color: #706D65; cursor: pointer; transition: all 0.15s; }
.sf-grp-status-opt input:checked + label.sf-grp-lbl-a { background: #F0FDF4; border-color: #86EFAC; color: #16A34A; }
.sf-grp-status-opt input:checked + label.sf-grp-lbl-i { background: #ECEEF1; border-color: #DDE0E5; color: #706D65; }

/* ── Form actions bar ── */
.sf-grp-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 11px 16px; border-top: 1px solid #E8EAED; background: #FAFBFC; }
.sf-grp-btn-primary { background: var(--primary-color, #2563EB); color: white; box-shadow: 0 1px 3px rgba(37,99,235,0.3); }
.sf-grp-btn-primary:hover { background: #1D55D4; }
.sf-grp-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── "Used In" accordion sections ── */
.sf-grp-uis-section { border-bottom: 1px solid #E8EAED; }
.sf-grp-uis-section:last-child { border-bottom: none; }
.sf-grp-uis-hdr { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; cursor: pointer; transition: background 0.12s; user-select: none; }
.sf-grp-uis-hdr:hover { background: #ECEEF1; }
.sf-grp-uis-hdr-left { display: flex; align-items: center; gap: 9px; }
.sf-grp-uis-ico { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sf-grp-uis-title { font-size: 13px; font-weight: 500; color: #1A1917; }
.sf-grp-uis-right { display: flex; align-items: center; gap: 8px; }
.sf-grp-uis-cnt { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 10px; min-width: 24px; text-align: center; }
.sf-grp-uis-cnt-zero { background: #ECEEF1; color: #A8A49C; border: 1px solid #DDE0E5; }
.sf-grp-uis-cnt-num { background: #EEF3FF; color: var(--primary-color, #2563EB); border: 1px solid #BFCFFF; }
.sf-grp-uis-chv { color: #A8A49C; transition: transform 0.18s; flex-shrink: 0; }
.sf-grp-uis-chv.open { transform: rotate(90deg); }
.sf-grp-uis-body { overflow: hidden; }
.sf-grp-uis-empty { padding: 8px 14px 12px; font-size: 12.5px; color: #A8A49C; font-style: italic; }

/* ── Campaign/form rows inside accordion ── */
.sf-grp-uis-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 14px; border-top: 1px solid #E8EAED; transition: background 0.1s; cursor: pointer; }
.sf-grp-uis-row:hover { background: #ECEEF1; }
.sf-grp-uis-row-name { font-size: 12.5px; color: var(--primary-color, #2563EB); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.sf-grp-uis-row-status { font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }
.sf-grp-uis-rs-new { background: #EEF3FF; color: var(--primary-color, #2563EB); }
.sf-grp-uis-rs-active { background: #F0FDF4; color: #16A34A; }
.sf-grp-uis-rs-executed { background: #FFFBEB; color: #D97706; }
.sf-grp-uis-rs-draft { background: #ECEEF1; color: #A8A49C; border: 1px solid #DDE0E5; }
.sf-grp-uis-rs-default { background: #ECEEF1; color: #706D65; }

/* ── Pagination inside accordion ── */
.sf-grp-pagination { display: flex; justify-content: center; padding: 6px 14px 10px; gap: 2px; }
.sf-grp-pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 5px; font-size: 12px; color: #706D65; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.sf-grp-pagination a:hover { background: #ECEEF1; }
.sf-grp-pagination a.active { background: #EEF3FF; color: var(--primary-color, #2563EB); font-weight: 600; border-color: #BFCFFF; }
.sf-grp-pagination a.disabled { color: #DDE0E5; pointer-events: none; }

/* ── Loading inside section ── */
.sf-grp-loading { display: flex; align-items: center; justify-content: center; padding: 20px; }

.accountHome_link:hover {
  cursor: pointer;
  text-decoration: underline;
}

.groupList:hover {
  cursor: pointer;
  text-decoration: underline;
}

.filist:hover {
  cursor: pointer;
  text-decoration: underline;
}

/*-------------------------------------- date picker -----------------------------------*/
input.sf-calendar-picker.flatpickr-input {
  display: none;
}

.flatpickr-day.selected {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.appointment_contact:hover {
  cursor: pointer;
  text-decoration: underline;
}

.appointment_company:hover {
  cursor: pointer;
  text-decoration: underline;
}

.appointment_opp:hover {
  cursor: pointer;
  text-decoration: underline;
}

.repeatChkBox div div div {
  margin-left: 0px !important;
}

.sf-atc-autoComplete.royalty-report .MuiAutocomplete-inputRoot {
  min-height: 47px !important;
}

.sf-atc-autoComplete.royalty-reportv2 .MuiAutocomplete-inputRoot {
  min-height: 47px !important;
}

.sf-atc-autoComplete.royalty-report label {
  transform: translate(14px, 13px) scale(1);
  -webkit-transform: translate(14px, 13px) scale(1);
  -moz-transform: translate(14px, 13px) scale(1);
  -ms-transform: translate(14px, 13px) scale(1);
}

.e-resource-cells.e-disable-dates {
  height: 72px !important;
}

.rrfc-select label {
  line-height: 1rem !important;
}

.audit-select label {
  line-height: 1rem !important;
  margin-top: 3px;
}

/*-------purchase order-----------------*/

#purchase_tax:hover {
  background-color: #b9b4b44d !important;
}

.tableCell {
  padding: 8px !important;
  border: 0px !important;
}

.tableColumn {
  line-height: 0 !important;
  padding-top: 20px !important;
  padding-left: 10px !important;
  padding-bottom: 20px !important;
}

.rc-tree-title {
  font-size: 14 !important;
}

.fr-toolbar .fr-command.fr-btn img,
.fr-popup .fr-command.fr-btn img,
.fr-modal .fr-command.fr-btn img {
  width: 52% !important;
}

.flatpickr-time input.flatpickr-hour {
  font-weight: normal !important;
}

.sf-add-units-plan-name {
  -webkit-transform-origin-y: bottom !important;
}

.sf-push-units-from-sfforms {
  -webkit-transform-origin-y: bottom !important;
}

.rc-tree-iconEle.rc-tree-icon__customize img {
  width: 16px;
}

.css-1lynv5e-MuiTooltip-tooltip {
  background: #322f2f !important;
  padding: 10px !important;
  font-size: 13 !important;
  font-weight: 400 !important;
}

.fr-toolbar .fr-command.fr-btn {
  margin: 1px !important;
  height: 35px !important;
}

.fr-toolbar .fr-more-toolbar.fr-expanded {
  height: 40px !important;
}

.fr-dropdown-menu {
  max-height: 200px !important;
  overflow: auto !important;
}
.fr-second-toolbar {
  border-radius: 8px !important;
}
#basedOn {
  width: 11rem;
}

#AddActions {
  height: 18px;
}
.selected_Tabs {
  border: 1px solid #d3d3d3;
  color: white;
  overflow: "hidden";
  text-overflow: "ellipsis";
  white-space: "nowrap";
  padding-right: 3px;
}
.audit_tabs_hover {
  border: 1px solid #d3d3d3;
  overflow: "hidden";
  text-overflow: "ellipsis";
  white-space: "nowrap";
  padding-right: 3px;
}

.workflow_stage_hover {
  background-color: #d3d3d3;
}

.workflow_stage_hover:hover {
  background-color: #ffffff;
}
/**********************Mui Dialog******************/

/* .MuiDialog-root{
  z-index: 33000 !important
}*/

/********************** unit Tree****************/
.expanded-row {
  background: rgba(0, 0, 0, 0.14);
}
.parent-row .rdg-cell {
  font-weight: normal !important;
}

/********************** Table ****************/
.aproved-row {
  color: rgb(32, 168, 4);
}
.rejected-row {
  color: rgb(252, 0, 0);
}

.pending-row {
  color: '';
}

.completed-row {
  color: #008027;
}

.in-progress-row {
  color: '';
}

.overdue-row {
  color: rgb(252, 0, 0);
}

.not-started-row {
  color: #000000;
}

/********************** custom z-index for  ****************/
.fr-popup.fr-desktop.fr-above.fr-active {
  z-index: 1300 !important;
}
/********************** Audit Answers slider Attachement ****************/

.slider-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  margin: auto;
}

.slider-container .slick-prev:before,
.slider-container .slick-next:before {
  color: black;
}

.audit-slider-container {
  width: 100%;
  margin: auto;
}

.audit-slider-container .slick-prev:before,
.audit-slider-container .slick-next:before {
  color: black;
}

#TaskReportType {
  height: "20px";
}

/*********************** gantt charts ****************/

.e-gantt-tooltiptable {
  color: #ffffff !important;
}

/********************  PhoneInput **************/
.Mui-focused {
  border: none !important;
}
.PhoneInput-flag {
  width: 25px;
}
.e-appointment.e-lib.e-draggable {
  line-height: 1.2 !important;
}

/* Dashboard Layout - syncfusion */

/* CSS Media Queries */
.dashboard-layout .e-panel {
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .dashboard-layout .e-panel {
    grid-column: span 2;
  }
}

@media (max-width: 1024px) {
  .dashboard-layout .e-panel {
    grid-column: span 3;
  }
}

@media (min-width: 1025px) {
  .dashboard-layout .e-panel {
    grid-column: span 6;
  }
}

.e-panel-header {
  padding: 0% !important;
}

.e-dashboardlayout.e-control .e-panel .e-panel-container .e-panel-content {
  background-color: #ffffff;
  padding: 2px;
  overflow: scroll;
}

.JSON-view > div {
  max-width: 620px;
  background-color: #ffffff !important;
}

#webhook-last-ran-list table {
  border-collapse: collapse;
  width: 100%;
}

#webhook-last-ran-list th,
#webhook-last-ran-list td {
  padding: 15px;
  text-align: left;
  border-top: 1px solid #ddd;
}

.sf-auto-complete-root {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  vertical-align: top;
  width: 100%;
}
.sf-auto-complete-dense-root {
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  vertical-align: top;
  width: 100%;
}
.file-ul {
  list-style: none;
}

.report-row .hover-icon {
  display: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.report-row:hover .hover-icon {
  display: inline-block;
  opacity: 1;
}

.filter-menu-container {
  /* background-color:#fff; */
  color: #000;
  font-family: "Roboto", sans-serif !important;
}
.column-reports-container {
  background-color: #fff;
  height: 100%;
}
.filter-menu-container .column-recent-container {
  background-color: #fff;
  height: 100%;
}

/* Dashboard Layout custom styles */

#dashboard_layout > div {
  border: none;
  box-shadow: none;
}

#dashboard_layout #sfCustomTable {
  width: 100% !important;
  margin: 0 !important;
}

#dashboard_layout .e-panel-content {
  overflow-y: auto;
  overflow-x: scroll;
}
.dashboard-container {
  font-family: "Roboto", sans-serif !important;
}

#dashboard_layout .e-panel-content::-webkit-scrollbar-thumb {
  border: 1px solid #f9f9f9;
}

/* Scoped: hide "Add all" and "Remove all" buttons inside a specific wrapper */
.dualbox--no-bulk-buttons .rdl-move-all-right,
.dualbox--no-bulk-buttons .rdl-move-all-left {
  display: none !important;
}
.css-umwmss-MuiCardContent-root:last-child {
  padding-bottom: 0px;
}

/*------------------ Custom CSS for Ai search ------------------*/
.sf-markdown-area-wrap h1 {
  font-size: 15px !important;
  margin: 5px 0px !important;
}
.sf-markdown-area-wrap h2 {
  font-size: 14px !important;
  margin: 5px 0px !important;
}
.sf-markdown-area-wrap h3 {
  font-size: 13px !important;
  margin: 5px 0px !important;
}
.sf-markdown-area-wrap h4 {
  font-size: 12px !important;
  margin: 5px 0px !important;
}
.sf-markdown-area-wrap h5 {
  font-size: 11px !important;
  margin: 5px 0px !important;
}

.sf-markdown-area-wrap h6 {
  font-size: 10px !important;
  margin: 5px 0px !important;
}
.sf-markdown-area-wrap p {
  font-size: 14px !important;
  margin: 2.5px 0px !important;
  font-weight: normal !important;
  line-height: 1.5 !important;
}
.sf-markdown-area-wrap ul {
  font-size: 14px !important;
  font-weight: normal !important;
  margin: 2px 0px !important;
}
.sf-markdown-area-wrap li {
  font-size: 14px !important;
  font-weight: normal !important;
  margin: 2px 0px !important;
}
.sf-markdown-area-wrap ol {
  font-size: 14px !important;
  font-weight: normal !important;
  margin: 2px 0px !important;
}
.sf-markdown-area-wrap li {
  font-size: 14px !important;
  font-weight: normal !important;
  margin: 2px 0px !important;
}

.sf-ai-disclaimer-text {
  font-size: 10px !important;
  color: #494949 !important;
}
/* Custom CSS for Metabase */
.metabase-dashboard-container button[aria-label="Add action"] {
  display: none !important;
}

/* .metabase-dashboard-container div[data-element-id="mantine-popover"] {
  z-index: 9999 !important;
} */

.metabase-dashboard-container .mb-mantine-Modal-inner {
  z-index: 9999 !important;
}

.metabase-dashboard-container
  button[data-testid="dashboard-and-collection-picker-button"] {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

.metabase-dashboard-container div[data-testid="echarts-tooltip"] table td {
  color: #fff !important;
}
.metabase-dashboard-container
  div[data-testid="echarts-tooltip"]
  div[data-testid="echarts-tooltip-header"] {
  color: #fff !important;
}
.mainContainer > header {
  z-index: 150 !important;
}

/* .metabase-dashboard-container div:has( [data-testid="modal"] ) {
  z-index: 9999 !important;
} */

.metabase-dashboard-container button[aria-label="Custom column"] {
  display: none !important;
}

.metabase-dashboard-container div[data-testid="new-button-bar"] {
  display: none !important;
}

/* Custom CSS for Notification Email Editor */
.notification-rules .notification-email-workarea {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.notification-rules .notification-editor-container {
  margin-top: 20px !important;
  margin-bottom: 0px !important;
  margin-left: 0px !important;
  margin-right: 0px !important;
}

/* Custom CSS for tree of library */
.sf-custom-tree .rc-tree-switcher {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
.sf-custom-tree .rc-tree-treenode {
  border: none !important;
}
.sf-custom-tree .rc-tree-child-tree {
  border-left: none !important;
}

.rc-tree-node-selected {
  background-color: color-mix(
    in srgb,
    var(--primary-color) 25%,
    transparent
  ) !important;
  padding: 0px 10px !important;
  box-shadow: 0 0 0 #ffb951 !important;
  border-radius: 4px !important;
}

/* ==========================================================
   LIST VIEW v2 — matching List-view.html enterprise design
   ========================================================== */

/* Page background */
.pageBg {
  background: #F1F2F4 !important;
}

/* Flex layout — gap + alignment fixes */
.pageBg.clearfix {
  gap: 14px !important;
  padding: 0px 0px 0px !important;
  align-items: flex-start !important;
}

/* ── SIDEBAR ─────────────────────────────────────────── */

.sf-lv-sidebar-outer {
  float: none !important;
  flex-shrink: 0 !important;
  align-self: flex-start !important;
  overflow: hidden !important;
  transition: width 0.3s ease, opacity 0.25s ease, margin 0.3s ease !important;
}

.sf-lv-sidebar-outer.sf-lv-sidebar-open {
  width: 200px !important;
  opacity: 1 !important;
  margin-left: 15px !important;
}

.sf-lv-sidebar-outer-for-audit-answers.sf-lv-sidebar-open {
  width: 200px !important;
  opacity: 1 !important;
  margin-left: 0px !important;
}

.sf-lv-sidebar-outer.sf-lv-sidebar-collapsed {
  width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin-right: -14px !important; /* collapse the parent gap */
}

.sf-lv-sidebar-card {
  background: #ffffff;
  border: 1px solid #dde0e5;
  border-radius: 10px;
  padding: 12px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  width: 200px;
  max-height: calc(100vh - 186px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #DDE0E5 transparent;
}
.sf-lv-sidebar-card-overflow{max-height:calc(100vh - 321px)!important;}
.sf-lv-sidebar-card::-webkit-scrollbar { width: 4px; }
.sf-lv-sidebar-card::-webkit-scrollbar-track { background: transparent; }
.sf-lv-sidebar-card::-webkit-scrollbar-thumb { background: #DDE0E5; border-radius: 2px; }

/* "Filter By" header row inside sidebar */
.sf-lv-filter-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px 10px;
  border-bottom: none;
  margin-bottom: 4px;
  overflow: hidden;
  min-width: 0;
}

.sf-lv-filter-hdr-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a8a49c;
  white-space: nowrap;
  flex-shrink: 0;
}

/* GroupByFieldComponent root wrapper */
.sf-lv-gbf-wrapper {
  margin: 0 !important;
}

/* ── SIDEBAR ITEMS ───────────────────────────────────── */

.sf-lv-sidebar-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 7px 14px !important;
  cursor: pointer !important;
  font-size: 13px !important;
  color: #706d65 !important;
  transition: background 0.12s !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  gap: 8px !important;
}

.sf-lv-sidebar-item:hover {
  background: #eceef1 !important;
  color: #1a1917 !important;
  text-decoration: none !important;
}

.sf-lv-sidebar-item-active {
  color: var(--primary-color, #2563eb) !important;
  font-weight: 500 !important;
  background: color-mix(in srgb, var(--primary-color, #2563eb) 8%, white) !important;
}

.sf-lv-sidebar-item-active:hover {
  background: color-mix(in srgb, var(--primary-color, #2563eb) 12%, white) !important;
}

.sf-lv-item-inner {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

/* Colored status dot */
.sf-lv-s-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b0b8c4;
  flex-shrink: 0;
  display: inline-block;
}

/* Active dot inherits its dedicated inline color — no override needed */

.sf-lv-item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

/* Count badge */
.sf-lv-sidebar-badge {
  font-size: 11px !important;
  font-weight: 500 !important;
  background: #eceef1 !important;
  color: #a8a49c !important;
  padding: 1px 7px !important;
  border-radius: 10px !important;
  border: 1px solid #dde0e5 !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  line-height: 1.6 !important;
}

.sf-lv-sidebar-item-active .sf-lv-sidebar-badge {
  background: color-mix(in srgb, var(--primary-color, #2563eb) 25%, white) !important;
  color: var(--primary-color, #2563eb) !important;
  border-color: color-mix(in srgb, var(--primary-color, #2563eb) 25%, white) !important;
}

/* ── CONTENT AREA ────────────────────────────────────── */

.sf-lv-content-outer {
  float: none !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* ── TOOLBAR CARD ────────────────────────────────────── */

/* #list-view-hdr is now a transparent wrapper; card styling moved to .sf-lv-header-wrap */
#list-view-hdr {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 5px !important;
}

/* Regular toolbar card — inherits the old #list-view-hdr card look */
.sf-lv-header-wrap {
  background: #ffffff !important;
  border: 1px solid #dde0e5 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
  padding: 6px 14px !important;
}

/* Hide toolbar card when main list view has 0 records (no useful toolbar content) */
.sf-lv-hdr-empty .sf-lv-header-wrap {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.sf-lv-hdr-empty #list-view-hdr {
  margin-bottom: 0 !important;
}

/* ── TOOLBAR INNER FLEX WRAPPER ──────────────────────── */

/* The .clearfix div that holds all toolbar controls */
.sf-lv-toolbar-inner {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-left: 0 !important;
  min-height: 38px !important;
  width: 100%;
}

/* Remove legacy floats from all toolbar children */
.sf-lv-toolbar-inner > div {
  float: none !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Push pagination to the far right */
.sf-lv-toolbar-inner .pag {
  margin-left: auto !important;
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Search area vertical alignment */
.sf-lv-toolbar-inner .sf-lv-search-area {
  display: flex !important;
  align-items: center !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.sf-lv-toolbar-inner .sf-lv-search-area > div {
  display: flex !important;
  align-items: center !important;
}

/* ── TOOLBAR ACTION BUTTONS (batch-btn style) ────────── */
/* Icon buttons: edit, email, sms, call, queue, print, copy, more, expand */
/* Match List-view.html .batch-btn: pill, subtle border, accent hover */

.sf-lv-toolbar-inner > div:has(> .material-icons),
.sf-lv-toolbar-inner > div:has(> i.fa),
.sf-lv-toolbar-inner > div:has(> i.fas),
.sf-lv-toolbar-inner > div:has(> i.fa-solid),
.sf-lv-toolbar-inner > div:has(> img) {
  border-radius: 7px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  background: transparent !important;
  height: 30px !important;
  width: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s !important;
  cursor: pointer !important;
}

.sf-lv-toolbar-inner > div:has(> .material-icons):hover,
.sf-lv-toolbar-inner > div:has(> i.fa):hover,
.sf-lv-toolbar-inner > div:has(> i.fas):hover,
.sf-lv-toolbar-inner > div:has(> i.fa-solid):hover,
.sf-lv-toolbar-inner > div:has(> img):hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 8%, white) !important;
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 25%, white) !important;
}

/* Icon colors inside action buttons — muted, accent on hover */
.sf-lv-toolbar-inner > div:has(> .material-icons) > .material-icons,
.sf-lv-toolbar-inner > div:has(> i.fa) > i,
.sf-lv-toolbar-inner > div:has(> i.fas) > i,
.sf-lv-toolbar-inner > div:has(> i.fa-solid) > i {
  color: #706D65 !important;
  font-size: 16px !important;
  padding: 0 !important;
  transition: color 0.15s !important;
}

.sf-lv-toolbar-inner > div:has(> .material-icons):hover > .material-icons,
.sf-lv-toolbar-inner > div:has(> i.fa):hover > i,
.sf-lv-toolbar-inner > div:has(> i.fas):hover > i,
.sf-lv-toolbar-inner > div:has(> i.fa-solid):hover > i {
  color: var(--primary-color, #2563EB) !important;
}

/* Nested action buttons (e.g. More ⋮ button inside wrapper div) */
.sf-lv-toolbar-inner > div > div:has(> .material-icons) {
  border-radius: 7px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  background: transparent !important;
  height: 30px !important;
  width: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s !important;
}

.sf-lv-toolbar-inner > div > div:has(> .material-icons):hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 8%, white) !important;
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 25%, white) !important;
}

.sf-lv-toolbar-inner > div > div:has(> .material-icons) > .material-icons {
  color: #706D65 !important;
  font-size: 16px !important;
  padding: 0 !important;
  transition: color 0.15s !important;
}

.sf-lv-toolbar-inner > div > div:has(> .material-icons):hover > .material-icons {
  color: var(--primary-color, #2563EB) !important;
}

/* Toggle sidebar button (img) */
.sf-lv-toolbar-inner > div:has(> img) > img {
  opacity: 0.55 !important;
  transition: opacity 0.15s !important;
  max-height: 20px !important;
  display: block !important;
}

.sf-lv-toolbar-inner > div:has(> img):hover > img {
  opacity: 1 !important;
}

/* ── SEARCH INPUT AREA ──────────────────────────────── */

/* Search wrapper — unified container for dropdown + input */
.sf-lv-search-area {
  margin-left: 4px !important;
  border: 1px solid #DDE0E5 !important;
  border-radius: 7px !important;
  background: #eceef1 !important;
  overflow: hidden !important;
  transition: all 0.2s !important;
  height: 32px !important;
}

.sf-lv-search-area:focus-within {
  background: #ffffff !important;
  border-color: var(--primary-color, #2563eb) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #2563eb) 15%, white) !important;
}

.sf-lv-search-area > div {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* Fix search area internal alignment */
.sf-lv-search-area > div > div[style*="float"] {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

/* Remove individual borders/backgrounds from inner elements — they share the outer container */
.sf-lv-search-area > div > div[style*="border"] {
  border: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* Subtle separator between dropdown and input */
.sf-lv-search-area > div > div[style*="border"] + div {
  border-left: 1px solid #DDE0E5 !important;
}

/* Search text input */
.listview-search-input {
  outline: none !important;
  border: none !important;
  background: transparent !important;
  color: #1a1917 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  width: 100% !important;
  min-width: 80px !important;
  text-overflow: ellipsis !important;
}

.listview-search-input::placeholder {
  color: #a8a49c !important;
}

/* Search field selector dropdown */
.sf-lv-search-area > div > div[style*="89px"],
.sf-lv-search-area > div > div[style*="width"] {
  width: auto !important;
  min-width: 80px !important;
  background: transparent !important;
  border-right: 1px solid #DDE0E5 !important;
  border-radius: 0 !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 4px 0 8px !important;
}

/* Search field label — ellipsis for long names */
.sf-lv-search-area > div > div[style*="89px"] > div:first-child,
.sf-lv-search-area > div > div[style*="width"] > div[style*="maxWidth"] {
  max-width: 150px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  color: #706D65 !important;
  float: none !important;
  padding: 0 !important;
}

/* Search field arrow icon */
.sf-lv-search-area > div > div[style*="89px"] > div:last-child,
.sf-lv-search-area > div > div[style*="width"] > div[style*="float: right"] {
  float: none !important;
  display: flex !important;
  align-items: center !important;
}

/* Search input text — match column view */
.sf-lv-search-area input {
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
  height: auto !important;
}

/* ── BATCH TOOLBAR (selection indicator bar) ──────────── */
/* Glassmorphism floating bar shown when rows are selected */
/* Matches List-view.html .batch-toolbar design */

.sf-lv-header-wrap {
  /* Wrapper for batch toolbar + regular toolbar */
}

.sf-lv-batch-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: #ffffff !important;
  border: 1px solid #DDE0E5 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  margin-bottom: 2px !important;
  animation: sfFadeSlideUp 0.2s ease both !important;
}

.sf-lv-batch-count {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1A1917 !important;
  white-space: nowrap !important;
}

.sf-lv-batch-count span {
  color: var(--primary-color, #2563EB) !important;
}

/* Batch toolbar vertical divider */
.sf-lv-batch-divider-v {
  width: 1px !important;
  height: 18px !important;
  background: rgba(0,0,0,0.1) !important;
  margin: 0 2px !important;
  flex-shrink: 0 !important;
}

/* Batch actions container — single row, overflow handled by JS */
.sf-lv-batch-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  min-width: 0 !important;
}

/* Batch action buttons — labeled pills matching .batch-btn in List-view.html */
.sf-lv-batch-btn {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  background: transparent !important;
  color: #706D65 !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.sf-lv-batch-btn:hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 8%, white) !important;
  color: var(--primary-color, #2563EB) !important;
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 40%, white) !important;
}

/* Delete button — always red */
.sf-lv-batch-btn.sf-lv-batch-btn-delete {
  color: #DC2626 !important;
  border-color: rgba(220, 38, 38, 0.2) !important;
}

.sf-lv-batch-btn.sf-lv-batch-btn-delete:hover {
  background: #FEE2E2 !important;
  color: #DC2626 !important;
  border-color: rgba(220, 38, 38, 0.35) !important;
}

.sf-lv-batch-btn.sf-lv-batch-btn-delete .MuiIcon-root {
  color: #DC2626 !important;
}

.sf-lv-batch-btn .MuiIcon-root,
.sf-lv-batch-btn .material-icons {
  font-size: 13px !important;
  color: inherit !important;
}

.sf-lv-batch-btn i {
  font-size: 11px !important;
  color: inherit !important;
}

/* Reusable themed hover for action buttons — add className="sf-action-btn" */
.sf-action-btn {
  transition: all 0.15s !important;
  text-transform: none !important;
}

.sf-action-btn:hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 8%, white) !important;
  color: var(--primary-color, #2563EB) !important;
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 40%, white) !important;
}

/* Recycle Bin "Empty" button — exempt from toolbar icon hiding */
.sf-lv-toolbar-inner > .sf-lv-recycle-empty-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 7px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  background: transparent !important;
  height: 30px !important;
  width: 30px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.sf-lv-toolbar-inner > .sf-lv-recycle-empty-btn:hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 8%, white) !important;
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 25%, white) !important;
}
.sf-lv-toolbar-inner > .sf-lv-recycle-empty-btn > .material-icons {
  color: #706D65 !important;
  font-size: 16px !important;
  transition: color 0.15s !important;
}
.sf-lv-toolbar-inner > .sf-lv-recycle-empty-btn:hover > .material-icons {
  color: var(--primary-color, #2563EB) !important;
}

/* Always hide action icon buttons from toolbar (shown in batch toolbar instead) */
/* Keep toolbar clean: only sidebar toggle, search, pagination, settings, queue */
.sf-lv-toolbar-inner > div:has(> .material-icons):not(.sf-lv-recycle-empty-btn),
.sf-lv-toolbar-inner > div:has(> i.fa):not(.sf-lv-search-area):not(.sf-lv-search-area *),
.sf-lv-toolbar-inner > div:has(> i.fas):not(.sf-lv-queue-btn),
.sf-lv-toolbar-inner > div:has(> i.fa-solid) {
  display: none !important;
}

/* Sidebar toggle removed per feedback — group by always visible */
.sf-lv-toolbar-inner > div:has(> img) {
  display: none !important;
}

/* Hide nested More button wrapper too */
.sf-lv-toolbar-inner > div > div:has(> .material-icons) {
  display: none !important;
}

/* ── LIST VIEW HELP BUTTON ───────────────────────────── */
/* Sits after settings icon in the .pag right-side group */
/* Highlighted with primary-color tint so it stands out from muted toolbar icons */
.sf-lv-help-btn {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 10%, white) !important;
  border: 1px solid color-mix(in srgb, var(--primary-color, #2563EB) 35%, white) !important;
  border-radius: 8px !important;
  color: var(--primary-color, #2563EB) !important;
}
.sf-lv-help-btn .material-icons {
  color: var(--primary-color, #2563EB) !important;
  opacity: 1 !important;
  font-size: 17px !important;
}
.sf-lv-help-btn:hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 20%, white) !important;
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 60%, white) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #2563EB) 12%, transparent) !important;
}

/* ── SETTINGS PAGE HELP BUTTON ───────────────────────── */
/* Floats top-right of each form-based Settings page      */
.sf-settings-help-btn {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 10%, white) !important;
  border: 1px solid color-mix(in srgb, var(--primary-color, #2563EB) 35%, white) !important;
  border-radius: 8px !important;
  color: var(--primary-color, #2563EB) !important;
}
.sf-settings-help-btn .material-icons {
  color: var(--primary-color, #2563EB) !important;
  opacity: 1 !important;
  font-size: 17px !important;
}
.sf-settings-help-btn:hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 20%, white) !important;
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 60%, white) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #2563EB) 12%, transparent) !important;
}

/* ── MUI MENU / DROPDOWN GLOBAL STYLING ─────────────── */
/* Matches List-view.html dropdown menus across the app */

.MuiMenu-paper {
  border: 1px solid #DDE0E5 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04) !important;
  padding: 4px 0 !important;
  margin-top: 4px !important;
}

.MuiMenu-paper .MuiMenuItem-root {
  font-size: 13px !important;
  padding: 8px 14px !important;
  color: #706D65 !important;
  transition: all 0.12s !important;
  min-height: unset !important;
  gap: 8px !important;
}

.MuiMenu-paper .MuiMenuItem-root:hover {
  background: #ECEEF1 !important;
  color: #1A1917 !important;
}

/* Delete/danger actions in menus */
.MuiMenu-paper .MuiMenuItem-root[value="Delete"],
.MuiMenu-paper .MuiMenuItem-root[value="delete"] {
  color: #DC2626 !important;
}

.MuiMenu-paper .MuiMenuItem-root[value="Delete"]:hover,
.MuiMenu-paper .MuiMenuItem-root[value="delete"]:hover {
  background: #FFF5F5 !important;
  color: #DC2626 !important;
}

/* ── Card Context Menu — compact overlay (.tc-ctx equivalent) ── */
.sf-ct-card-ctx.MuiPaper-root {
  border-radius: 8px !important;
  min-width: 130px !important;
  max-width: 180px !important;
}
.sf-ct-card-ctx .MuiMenuItem-root {
  padding: 7px 12px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}
.sf-ct-card-ctx .MuiMenuItem-root[value="delete"],
.sf-ct-card-ctx .MuiMenuItem-root[value="Delete"] {
  color: #DC2626 !important;
}
.sf-ct-card-ctx .MuiMenuItem-root[value="delete"]:hover,
.sf-ct-card-ctx .MuiMenuItem-root[value="Delete"]:hover {
  background: #FEE2E2 !important;
  color: #DC2626 !important;
}

/* ── PAGINATION PAGE BUTTONS ────────────────────────── */
/* page number divs inside .pageCount — all have inline styles */

.pageCount > div {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  border: 1px solid #DDE0E5 !important;
  background: #ffffff !important;
  padding: 0 5px !important;
  cursor: pointer !important;
  margin: 0 1px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  transition: border-color 0.12s, background 0.12s !important;
}

.pageCount > div:hover {
  border-color: var(--primary-color, #2563eb) !important;
  background: color-mix(in srgb, var(--primary-color, #2563eb) 6%, white) !important;
}

/* Page size dropdown — match List-view.html select */
.sf-pagenation {
  border-radius: 5px !important;
  font-size: 12px !important;
  height: 26px !important;
  background: #ffffff !important;
  color: #706D65 !important;
}

.sf-pagenation .MuiSelect-select {
  padding: 2px 8px !important;
  text-align: center !important;
  font-size: 12px !important;
  color: #706D65 !important;
  min-height: unset !important;
  line-height: 1.4 !important;
}

/* Show N per page wrapper */
.sf-page-item-no .MuiOutlinedInput-root {
  border-radius: 5px !important;
  height: 26px !important;
}

.sf-page-item-no .MuiOutlinedInput-notchedOutline {
  border-color: #DDE0E5 !important;
}

.sf-page-item-no .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: color-mix(in srgb, var(--primary-color, #2563eb) 40%, white) !important;
}

/* ── LOOKUP / FIND-AND-LINK POPUP — compact layout ───── */
.lookuppag {
  padding-top: 12px !important;
}
.lookuppag .sf-lv-toolbar-inner {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
}
/* Search area — don't exceed half */
.lookuppag .sf-lv-toolbar-inner > div:first-child {
  float: none !important;
  width: auto !important;
  flex: 0 1 45% !important;
  min-width: 0 !important;
}
/* Pagination area — shrink to fit */
.lookuppag .sf-lv-toolbar-inner .pag {
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  margin-left: auto !important;
}
/* Compact page number buttons */
.lookuppag .pageCount > div {
  min-width: 22px !important;
  height: 22px !important;
  font-size: 11px !important;
  padding: 0 2px !important;
  margin: 0 1px !important;
  border-radius: 4px !important;
}
/* Compact "Show N" dropdown */
.lookuppag .sf-pagenation {
  height: 22px !important;
  font-size: 11px !important;
}
.lookuppag .sf-pagenation .MuiSelect-select {
  padding: 1px 6px !important;
  font-size: 11px !important;
}
.lookuppag .sf-page-item-no .MuiOutlinedInput-root {
  height: 22px !important;
}
/* "..." more popover — compact */
.lookuppag .pageCount [name="pop-over"] {
  height: 22px !important;
}
.lookuppag .pageCount [name="pop-over"] span {
  height: 22px !important;
  font-size: 14px !important;
  padding: 0 2px !important;
}
/* Search field — theme-aware styling */
.lookuppag .custom-search-container {
  border: 1px solid #DDE0E5 !important;
  border-radius: 7px !important;
  background: #F9FAFB !important;
  height: 32px !important;
  padding: 2px 10px !important;
  transition: all 0.15s !important;
}
.lookuppag .custom-search-container:focus-within {
  border-color: var(--primary-color, #2563EB) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color, #2563EB) 12%, transparent) !important;
}
.lookuppag .custom-search-input {
  font-size: 13px !important;
  color: #1A1917 !important;
}
.lookuppag .custom-search-input::placeholder {
  color: #A8A49C !important;
  font-size: 13px !important;
}
.lookuppag .custom-search-container .fa-search {
  color: #A8A49C !important;
  font-size: 13px !important;
  transition: color 0.15s !important;
}
.lookuppag .custom-search-container:focus-within .fa-search {
  color: var(--primary-color, #2563EB) !important;
}
/* "Find by" dropdown — match search field height & theme */
.lookuppag .sf-lv-toolbar-inner .MuiFormControl-root {
  height: 32px !important;
}
.lookuppag .sf-lv-toolbar-inner .MuiInputLabel-root {
  font-size: 12px !important;
  color: #706D65 !important;
  transform: translate(10px, -8px) scale(0.85) !important;
  background: #FFFFFF !important;
  padding: 0 4px !important;
}
.lookuppag .sf-lv-toolbar-inner .MuiOutlinedInput-root:has(.MuiSelect-select) {
  height: 32px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  background: #F9FAFB !important;
}
.lookuppag .sf-lv-toolbar-inner .MuiOutlinedInput-root .MuiSelect-select {
  padding: 4px 10px !important;
  font-size: 13px !important;
  color: #1A1917 !important;
}
.lookuppag .sf-lv-toolbar-inner .MuiOutlinedInput-notchedOutline {
  border-color: #DDE0E5 !important;
  border-radius: 7px !important;
}
.lookuppag .sf-lv-toolbar-inner .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 40%, white) !important;
}
.lookuppag .sf-lv-toolbar-inner .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--primary-color, #2563EB) !important;
  border-width: 1px !important;
}
/* Align search + dropdown row */
.lookuppag .sf-lv-toolbar-inner > div:first-child > div {
  align-items: center !important;
  margin-top: 0 !important;
}
.lookuppag .sf-lv-toolbar-inner > div:first-child > div > div {
  margin-top: 0 !important;
  padding-top: 0 !important;
  height: 32px !important;
}
.lookuppag .sf-lv-header-wrap {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 6px 0 !important;
}
/* No record found — clean empty state for lookup popup */
.lookuppag .pageBg {
  background: #FFFFFF !important;
}
.lookuppag .data_less,
.lookuppag .data_less_text {
  margin-top: 40px !important;
  font-size: 13px !important;
  color: #A8A49C !important;
}
.lookuppag .data_less span[style*="font-size: 100px"] {
  font-size: 48px !important;
  opacity: 0.25 !important;
}
.lookuppag .table-striped {
  background: #FFFFFF !important;
}

/* ── DIVIDER before settings (visual separator) ──────── */

.pageSet {
  margin-left: 6px !important;
  padding-left: 6px !important;
  border-left: 1px solid #DDE0E5 !important;
}

/* ── SETTINGS GEAR BUTTON ────────────────────────────── */

.pageSet .MuiIconButton-root {
  border: none !important;
  border-radius: 6px !important;
  width: 30px !important;
  height: 30px !important;
  padding: 5px !important;
  transition: all 0.15s !important;
  color: #A8A49C !important;
}

.pageSet .MuiIconButton-root:hover {
  background: #ECEEF1 !important;
  color: #1A1917 !important;
}

.pageSet .MuiIconButton-root .MuiIcon-root {
  color: inherit !important;
  opacity: 1 !important;
}

/* ── PRIMARY ADD / ACTION BUTTONS ──────────────────────── */
/* All .MuiButton-root inside .abtn1 (objectHeading add buttons) */

.abtn1 .MuiButton-root {
  border-radius: 8px !important;
  text-transform: none !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18) !important;
  transition: box-shadow 0.15s, filter 0.15s !important;
}

.abtn1 .MuiButton-root:hover {
  filter: brightness(0.92) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22) !important;
}

/* ── PAGE HEADER (.appheader / .headingApp) ──────────── */

/* Clean floating header on page bg — no card, no border */
.appheader {
  width: 100% !important;
  background: transparent !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  /* padding-right: 8px !important; */
  margin-bottom: 0px !important;
  border-bottom: none !important;
  box-sizing: border-box !important;
}

/* Override the restrictive 40px heights from inline styles */
.appheader > div {
  height: auto !important;
  min-height: 40px !important;
}

.appheader > div > div {
  height: auto !important;
}

/* Relax the 40px height constraint on the headingApp wrapper */
.headingApp {
  height: auto !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
}

/* ObjectHeading root div — flex layout */
.headingApp > div {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

/* Left content wrapper (icon + title) — remove float, use flex */
.headingApp > div > div:first-child {
  display: flex !important;
  align-items: center !important;
  float: none !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Fix icon alignment inside heading — remove float, let flex handle it */
.headingApp > div > div:first-child > i {
  float: none !important;
  margin-top: 0 !important;
  flex-shrink: 0 !important;
}

/* Fix company name span alignment (Units page) */
.headingApp > div > div:first-child > span {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Page title text (the inline-flex div) */
.headingApp > div > div:first-child > div[style*="inline-flex"] {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  color: #1a1917 !important;
  margin-left: 0px !important;
  margin-right: 4px !important;
}

/* Right-side button containers — remove float, reorder AFTER view toggle */
.headingApp > div > .abtn1,
.headingApp > div > div[style*="float: right"],
.headingApp > div > div[style*="float:right"] {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  order: 1 !important;
}

/* Push first button container right when no view toggle present */
.headingApp > div > div:first-child + .abtn1 {
  margin-left: auto !important;
}

/* View toggle wrapper — appears BEFORE add/import buttons (order 0 < order 1) */
/* KanbanToggle wraps .sf-view-toggle inside an outer <div> with no class */
.headingApp > div > div:has(> .sf-view-toggle),
.headingApp > div > div:has(> div > .sf-view-toggle) {
  order: 0 !important;
  flex-shrink: 0 !important;
  margin-left: 8px !important;
  float: none !important;
}

/* ── VIEW TOGGLE PILL GROUP ──────────────────────────── */
/* Segmented pill matching .view-toggle from List-view.html */
.sf-view-toggle {
  display: flex !important;
  background: #ECEEF1 !important;
  border-radius: 7px !important;
  padding: 2px !important;
  gap: 1px !important;
  float: none !important;
  margin-right: 0 !important;
  padding-top: 2px !important;
}

.sf-view-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 5px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #A8A49C !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  border: 1px solid #DDE0E5 !important;
  background: transparent !important;
  position: static !important;
  top: auto !important;
  line-height: normal !important;
  text-align: center !important;
  margin-left: 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
}

.sf-view-btn span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sf-view-btn i {
  font-size: 13px !important;
}

.sf-view-btn-active {
  background: #FFFFFF !important;
  color: var(--primary-color, #2563EB) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.sf-view-btn:hover:not(.sf-view-btn-active) {
  color: #6B7280 !important;
}

/* ── TITLE DROPDOWN CHEVRON ─────────────────────────── */
/* Matches .title-dropdown from List-view.html */

.sf-title-dropdown {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #A8A49C !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  flex-shrink: 0 !important;
  margin-left: 4px !important;
}

.sf-title-dropdown:hover {
  background: #ECEEF1 !important;
  color: #1A1917 !important;
}

.sf-title-dropdown svg {
  color: inherit !important;
  transition: transform 0.2s ease !important;
}

/* ── EDIT + REFRESH BUTTONS in page header ──────────── */
/* Matches .toolbar-icon from List-view.html */

.sf-edit-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #A8A49C !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  flex-shrink: 0 !important;
  margin-left: 2px !important;
}

.sf-edit-btn:hover {
  background: #ECEEF1 !important;
  color: #1A1917 !important;
}

.sf-edit-btn svg {
  color: inherit !important;
}

.sf-refresh-btn {
  width: 30px !important;
  height: 30px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #A8A49C !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  flex-shrink: 0 !important;
  margin-left: 2px !important;
}

.sf-refresh-btn:hover {
  background: #ECEEF1 !important;
  color: #1A1917 !important;
}

.sf-refresh-btn .MuiIcon-root {
  font-size: 16px !important;
  color: inherit !important;
}

.sf-refresh-btn svg {
  color: inherit !important;
  transition: transform 0.6s ease !important;
}

.sf-refresh-btn:active svg {
  transform: rotate(360deg) !important;
}

/* Sidebar — sticky positioning */
.sf-lv-sidebar-outer {
  position: sticky !important;
}


/* ==========================================================
   ENTERPRISE DESIGN v3 — List-view.html full design match
   Applied across the entire application (nav, tabs, headers)
   ========================================================== */

/* ── TOP MODULE BAR (.aapbar) ────────────────────────── */
/* Dark nav with pill-shaped module tabs */

.aapbar {
  background-color: var(--module-color, #404040) !important;
  height: 52px !important;
}

.aapbar .MuiToolbar-root {
  min-height: 52px !important;
  padding: 0 20px !important;
}

.aapbar .MuiToolbar-root .MuiList-root {
  gap: 2px !important;
  height: 52px !important;
  align-items: center !important;
}

.aapbar .MuiToolbar-root .MuiList-root .MuiListItem-root {
  width: auto !important;
  height: auto !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background-color: transparent !important;
}

/* Active module tab — override inline menuColor bg */
.aapbar .MuiToolbar-root .MuiList-root .MuiListItem-root[style*="background"] {
  background-color: rgba(255,255,255,0.12) !important;
}

.aapbar .MuiToolbar-root .MuiList-root .MuiListItemButton-root {
  padding: 6px 14px !important;
  border-radius: 6px !important;
  height: auto !important;
  min-height: unset !important;
}

.aapbar .MuiToolbar-root .MuiList-root .MuiListItemButton-root:hover {
  background-color: rgba(255,255,255,0.07) !important;
}

/* Module tab text — inactive */
.aapbar .MuiToolbar-root .MuiList-root .MuiListItemText-root {
  margin: 0 !important;
}

.aapbar .MuiToolbar-root .MuiList-root .MuiListItemText-root div {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.55) !important;
  max-width: none !important;
  overflow: visible !important;
  height: auto !important;
}

/* Module tab text — active */
.aapbar .MuiToolbar-root .MuiList-root .MuiListItem-root[style*="background"] .MuiListItemText-root div {
  color: white !important;
}

/* ── TOP NAV RIGHT ICONS ─────────────────────────────── */

.aapbar .MuiToolbar-root > div[style*="right"] {
  position: static !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.aapbar .MuiToolbar-root > div[style*="right"] .MuiIconButton-root,
.aapbar .MuiToolbar-root > div[style*="right"] > div[style*="cursor"] {
  width: 32px !important;
  height: 32px !important;
  border-radius: 7px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,0.55) !important;
  transition: all 0.15s !important;
}

.aapbar .MuiToolbar-root > div[style*="right"] .MuiIconButton-root:hover {
  background: rgba(255,255,255,0.1) !important;
  color: white !important;
}

/* Fix icon wrapper divs (display:grid + height:50 from styles.js) */
.aapbar .MuiToolbar-root > div[style*="right"] > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  float: none !important;
}

/* Notification Badge alignment — Badge root is a <span> with position:relative */
.aapbar .MuiBadge-root {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  padding: 0 !important;
}

/* SVG nav icons — consistent color and hover behavior */
.aapbar .MuiToolbar-root > div[style*="right"] .MuiIconButton-root svg {
  color: rgba(255,255,255,0.55) !important;
  transition: color 0.15s !important;
  flex-shrink: 0 !important;
}

.aapbar .MuiToolbar-root > div[style*="right"] .MuiIconButton-root:hover svg {
  color: white !important;
}

/* Logo container alignment — pill shape per design */
.aapbar .sf-logo-wrap {
  height: auto !important;
  padding: 5px 12px !important;
  border-radius: 10px !important;
  margin-right: 24px !important;
  display: flex !important;
  align-items: center !important;
}

/* Logo image sizing */
.aapbar .Logo {
  width: auto !important;
  height: 30px !important;
  margin-right: 0 !important;
}

/* Search bar — dark semi-transparent style (matches List-view.html .search-bar)
   Design: <svg icon> then <input> — icon left, input right
   App:    <input> then <i icon> — reversed, so use CSS order to swap */
.aapbar .Search {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  float: none !important;
  width: 220px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.2s !important;
  position: static !important;
  justify-content: flex-start !important;
}

.aapbar .Search:focus-within {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.2) !important;
  width: 260px !important;
}

/* Input — order 2 so it renders AFTER the icon visually */
.aapbar .Search input {
  background: none !important;
  border: none !important;
  outline: none !important;
  color: white !important;
  height: auto !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  line-height: normal !important;
  border-radius: 0 !important;
  order: 2 !important;
  flex: 1 !important;
}

.aapbar .Search input::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

/* Icon — order 1 so it renders BEFORE the input visually */
.aapbar .Search i,
.aapbar .Search i.fa-search {
  position: static !important;
  left: auto !important;
  top: auto !important;
  color: rgba(255,255,255,0.4) !important;
  font-size: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  width: auto !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  order: 1 !important;
}

/* Search parent wrapper (Layout.js div with paddingTop:6px; position:relative; flex:1)
   Keep position:relative so .advanced-search dropdown anchors here.
   Override paddingTop and flex to fix vertical alignment and prevent stretching. */
.aapbar .MuiToolbar-root > div[style*="right"] > div:has(.Search) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  flex: 0 0 auto !important;
}

/* The Search component outer wrapper div (search.js line 468) */
.aapbar .MuiToolbar-root > div[style*="right"] > div:has(.Search) > div {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* Fix dropdown width since parent is no longer flex:1 */
.aapbar .advanced-search {
  width: 520px !important;
  right: 0 !important;
  left: -149px !important;
}

/* Profile wrapper alignment */
.aapbar .MuiToolbar-root > div[style*="right"] > div[style*="padding: 6px"],
.aapbar .MuiToolbar-root > div[style*="right"] > div[style*="padding:6px"] {
  padding: 0 !important;
}

/* ── SUB NAVIGATION BAR (TopNavBar) ──────────────────── */
/* Pill tabs on slightly lighter dark bg */

/* TopNavBar wrapper div */
div:has(> .menu-overflow) {
  background-color: var(--menu-color, #515151) !important;
  border-bottom: 1px solid rgba(0,0,0,0.15) !important;
  padding: 0 20px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
}

.menu-overflow {
  gap: 2px !important;
  align-items: center !important;
  height: 44px !important;
}

/* Sub-nav wrapper — full nav-bar height so submenu top aligns correctly */
.filter-menu {
  height: 44px;
  display: flex;
  align-items: center;
}

/* Sub-nav item — pill shape, transparent bg */
.filter-menu .MuiListItem-root {
  height: auto !important;
  padding: 0 !important;
  border-radius: 6px !important;
  background-color: transparent !important;
}

.filter-menu .MuiListItemButton-root {
  padding: 5px 14px !important;
  border-radius: 6px !important;
  min-height: unset !important;
}

.filter-menu .MuiListItemButton-root:hover {
  background-color: rgba(255,255,255,0.1) !important;
}

/* Sub-nav text — inactive */
.filter-menu .MuiListItemText-root {
  margin: 0 !important;
}

.filter-menu .MuiListItemText-root div {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.65) !important;
  white-space: nowrap !important;
}

/* Active sub-nav item — uses .sf-subnav-active class (added in TopNavBar.js) */
.sf-subnav-active .MuiListItem-root {
  background-color: rgba(255,255,255,0.15) !important;
}

.sf-subnav-active .MuiListItemText-root div {
  color: white !important;
  font-weight: 500 !important;
}

/* Sub-nav hover text */
.filter-menu:hover .MuiListItemText-root div {
  color: white !important;
}

/* ── CONTENT HEADER / TAB BAR (.contentHeader) ───────── */
/* Flat underline tabs on white bg — matches List-view.html .tab-bar */

.contentHeader {
  background-color: #FFFFFF !important;
  border-top: none !important;
  border-bottom: 1px solid #DDE0E5 !important;
  height: auto !important;
  min-height: unset !important;
  padding: 0 20px !important;
  display: flex !important;
  align-items: stretch !important;
}

.contentHeader > div,
.contentHeader > div > div {
  background: transparent !important;
  padding-top: 0 !important;
}

/* MUI Tabs container */
.contentHeader .MuiTabs-root {
  min-height: auto !important;
  background: transparent !important;
  padding-top: 0 !important;
}

.contentHeader .MuiTabs-flexContainer {
  gap: 0 !important;
  align-items: stretch !important;
}

/* Individual tab — flat underline style */
.contentHeader .MuiTab-root {
  min-height: unset !important;
  height: auto !important;
  padding: 10px 16px !important;
  border-radius: 0 !important;
  text-transform: none !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: 0px !important;
  color: #706D65 !important;
  opacity: 1 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  transition: all 0.15s !important;
  letter-spacing: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: center !important;
}

/* Override inner div opacity — make all tabs fully visible */
.contentHeader .MuiTab-root > div {
  opacity: 1 !important;
  color: inherit !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  line-height: inherit !important;
}

/* Tab inner text div — override inline fontSize: 12px and lineHeight: 20px */
.contentHeader .MuiTab-root > div > div {
  color: inherit !important;
  opacity: 1 !important;
  height: auto !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.4 !important;
  max-width: none !important;
}

.contentHeader .MuiTab-root > div > div > div {
  color: inherit !important;
  opacity: 1 !important;
  height: auto !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* Tab icon inside text div */
.contentHeader .MuiTab-root > div > div i,
.contentHeader .MuiTab-root > div > div span {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* Tab label text */
.contentHeader .MuiTab-root > div > div span {
  font-family: 'Inter', sans-serif !important;
}

/* Active tab — accent color text + underline */
.contentHeader .MuiTab-root.sf-tab-active {
  background: transparent !important;
  border-bottom: 2px solid var(--primary-color, #2563EB) !important;
  color: var(--primary-color, #2563EB) !important;
  font-weight: 500 !important;
}

.contentHeader .MuiTab-root.sf-tab-active > div,
.contentHeader .MuiTab-root.sf-tab-active > div > div,
.contentHeader .MuiTab-root.sf-tab-active > div > div > div,
.contentHeader .MuiTab-root.sf-tab-active > div > div > div span,
.contentHeader .MuiTab-root.sf-tab-active > div > div > div i {
  color: var(--primary-color, #2563EB) !important;
}

/* Close icon on tabs */
.contentHeader .MuiTab-root .MuiSvgIcon-root {
  width: 14px !important;
  height: 14px !important;
  border-radius: 3px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  margin-left: 4px !important;
  flex-shrink: 0 !important;
  transition: all 0.15s !important;
}

/* Active tab close icon */
.contentHeader .MuiTab-root.sf-tab-active .MuiSvgIcon-root {
  color: var(--primary-color, #2563EB) !important;
  background: transparent !important;
}

.contentHeader .MuiTab-root.sf-tab-active .MuiSvgIcon-root:hover {
  color: var(--primary-color, #2563EB) !important;
  background: #DDE0E5 !important;
}

/* Inactive tab — muted colors */
.contentHeader .MuiTab-root.sf-tab-inactive {
  background: transparent !important;
  color: #706D65 !important;
}

.contentHeader .MuiTab-root.sf-tab-inactive > div,
.contentHeader .MuiTab-root.sf-tab-inactive > div > div,
.contentHeader .MuiTab-root.sf-tab-inactive > div > div > div,
.contentHeader .MuiTab-root.sf-tab-inactive > div > div > div span,
.contentHeader .MuiTab-root.sf-tab-inactive > div > div > div i {
  color: #706D65 !important;
}

.contentHeader .MuiTab-root.sf-tab-inactive .MuiSvgIcon-root {
  color: #A8A49C !important;
}

.contentHeader .MuiTab-root.sf-tab-inactive .MuiSvgIcon-root:hover {
  background: #DDE0E5 !important;
  color: #1A1917 !important;
}

/* Tab hover */
.contentHeader .MuiTab-root:hover {
  color: #1A1917 !important;
}

.contentHeader .MuiTab-root.sf-tab-active:hover {
  color: var(--primary-color, #2563EB) !important;
}

/* Remove MUI tab indicator line — we use border-bottom instead */
.contentHeader .MuiTabs-indicator {
  display: none !important;
}

/* ── OBJECT HEADING ICON ─────────────────────────────── */
/* 38x38 rounded container with accent-light bg */

i#instantColorChange {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--primary-color, #2563EB) 10%, white) !important;
  color: var(--primary-color, #2563EB) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  float: none !important;
  margin-top: 2px !important;
  margin-left: 0 !important;
  margin-right: 10px !important;
  padding: 0 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* ── PAGE TITLE STYLING ──────────────────────────────── */

/* Title text */
.headingApp > div > div:first-child > div[style*="inline-flex"] {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  color: #1A1917 !important;
  margin-left: 0px !important;
  margin-right: 4px !important;
}

/* ── SIDEBAR FIELD SELECTOR BUTTON ───────────────────── */
/* Accent pill button matching .sidebar-field-btn in List-view.html */

.sf-lv-field-selector.MuiButton-root {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 8%, white) !important;
  border: 1px solid color-mix(in srgb, var(--primary-color, #2563EB) 25%, white) !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--primary-color, #2563EB) !important;
  text-transform: none !important;
  min-width: unset !important;
  max-width: 120px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  transition: all 0.15s !important;
}

.sf-lv-field-selector.MuiButton-root:hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 18%, white) !important;
}

/* Arrow icon inside the field selector button */
.sf-lv-field-selector .MuiButton-endIcon {
  margin-left: 2px !important;
  margin-right: -2px !important;
}

.sf-lv-field-selector .MuiButton-endIcon .MuiIcon-root {
  font-size: 16px !important;
  color: var(--primary-color, #2563EB) !important;
}

/* ── POPOVER DROPDOWN MENU (c-popOverButton) ────────── */
/* Style the field selector dropdown menu to match sidebar-field-menu */

.c-popOverButton .MuiPaper-root {
  border: 1px solid #DDE0E5 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04) !important;
  padding: 4px 0 !important;
  min-width: 140px !important;
  overflow: hidden !important;
}
.c-popOverButton .MuiList-root {
  scrollbar-width: thin;
  scrollbar-color: #A8A49C transparent;
}
.c-popOverButton .MuiList-root::-webkit-scrollbar { width: 6px; }
.c-popOverButton .MuiList-root::-webkit-scrollbar-track { background: transparent; }
.c-popOverButton .MuiList-root::-webkit-scrollbar-thumb { background: #A8A49C; border-radius: 3px; }
.c-popOverButton .MuiList-root::-webkit-scrollbar-thumb:hover { background: #706D65; }

.c-popOverButton .MuiMenuItem-root {
  padding: 7px 12px !important;
  font-size: 13px !important;
  color: #706D65 !important;
  transition: all 0.12s !important;
  min-height: unset !important;
}

/* Override inline color on MenuItem inner spans */
.c-popOverButton .MuiMenuItem-root span {
  color: inherit !important;
}

.c-popOverButton .MuiMenuItem-root:hover {
  background: #ECEEF1 !important;
  color: #1A1917 !important;
}

/* Active/selected menu item */
.c-popOverButton .MuiMenuItem-root.Mui-selected {
  color: var(--primary-color, #2563EB) !important;
  font-weight: 500 !important;
  background: transparent !important;
}

.c-popOverButton .MuiMenuItem-root.Mui-selected:hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 6%, white) !important;
}

/* Checkmark icon inside menu item — matching List-view.html .fdi-check */
.c-popOverButton .MuiMenuItem-root .fa-check {
  color: var(--primary-color, #2563EB) !important;
  font-size: 11px !important;
  width: 14px !important;
}

/* Selected/active menu items (with checkmark visible) */
.c-popOverButton .MuiMenuItem-root:has(.fa-check) {
  color: var(--primary-color, #2563EB) !important;
  font-weight: 500 !important;
}

/* ── ADD BUTTON (objectHeading) — GHOST + PRIMARY ────── */
/* Ghost button (Import style) */

.headingApp .MuiButton-root.MuiButton-outlined,
.headingApp .btn-ghost {
  background: #FFFFFF !important;
  color: #706D65 !important;
  border: 1px solid #DDE0E5 !important;
  border-radius: 8px !important;
  text-transform: none !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 6px 16px !important;
  box-shadow: none !important;
  transition: all 0.15s !important;
}

.headingApp .MuiButton-root.MuiButton-outlined:hover,
.headingApp .btn-ghost:hover {
  background: #ECEEF1 !important;
  color: #1A1917 !important;
}

/* Primary button (Add Account) — already styled in .abtn1 */
.abtn1 .MuiButton-root {
  box-shadow: 0 1px 3px rgba(37,99,235,0.3) !important;
}

.abtn1 .MuiButton-root:hover {
  box-shadow: 0 2px 8px rgba(37,99,235,0.35) !important;
}

/* ── VIEW TOGGLE BUTTONS ─────────────────────────────── */
/* Segmented pill group matching List-view.html .view-toggle / .view-btn */

.sf-view-toggle {
  display: flex !important;
  align-items: center !important;
  background: #ECEEF1 !important;
  border-radius: 7px !important;
  padding: 2px !important;
  gap: 1px !important;
  float: none !important;
  margin-right: 8px !important;
  margin-left: 8px !important;
  padding-top: 2px !important;
}

.sf-view-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #A8A49C !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  top: auto !important;
  position: static !important;
  line-height: 1 !important;
}

.sf-view-btn:hover {
  color: #706D65 !important;
}

.sf-view-btn i {
  font-size: 13px !important;
  color: inherit !important;
}

.sf-view-btn-active {
  background: #FFFFFF !important;
  color: var(--primary-color, #2563EB) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.sf-view-btn-active i {
  color: var(--primary-color, #2563EB) !important;
}

/* ── MISC DESIGN REFINEMENTS ─────────────────────────── */

/* Smooth scrollbar for the whole page */
.pageBg::-webkit-scrollbar {
  width: 6px;
}

.pageBg::-webkit-scrollbar-track {
  background: transparent;
}

.pageBg::-webkit-scrollbar-thumb {
  background: #DDE0E5;
  border-radius: 3px;
}

/* Table/DataGrid row animation */
@keyframes sfFadeSlideUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sidebar smooth animation */
.sf-lv-sidebar-card {
  animation: sfFadeSlideUp 0.25s ease both !important;
}

/* Toolbar card animation */
#list-view-hdr {
  animation: sfFadeSlideUp 0.2s ease both;
}

/* DataGrid card animation */
.rdg {
  animation: sfFadeSlideUp 0.3s ease both;
}

/* ═══════════════════════════════════════════════
   COLUMN VIEW v2 — Enterprise Design
   Scoped under .sf-cv-board to avoid breaking
   kanban/forecast views that share .desk classes
   ═══════════════════════════════════════════════ */

/* ── Board Container ───────────────────────── */
.sf-cv-board.kanbanBord {
  display: flex !important;
  gap: 12px !important;
  white-space: normal !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  /* padding: 12px 0 16px 14px !important; */
  margin: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: var(--border, #DDE0E5) transparent;
}
.sf-cv-board.kanbanBord::-webkit-scrollbar { height: 6px; }
.sf-cv-board.kanbanBord::-webkit-scrollbar-track { background: transparent; }
.sf-cv-board.kanbanBord::-webkit-scrollbar-thumb { background: var(--border, #DDE0E5); border-radius: 3px; }

#divKanbanView{
}

/* ── Column ────────────────────────────────── */
.sf-cv-board .desk {
  flex: 0 0 240px !important;
  width: 240px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-bottom: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 200px !important;
  animation: sfFadeSlideUp 0.3s ease both;
}
.sf-cv-board .desk:nth-child(2) { animation-delay: 0.03s; }
.sf-cv-board .desk:nth-child(3) { animation-delay: 0.06s; }
.sf-cv-board .desk:nth-child(4) { animation-delay: 0.09s; }
.sf-cv-board .desk:nth-child(5) { animation-delay: 0.12s; }
.sf-cv-board .desk:nth-child(6) { animation-delay: 0.15s; }
.sf-cv-board .desk:nth-child(7) { animation-delay: 0.18s; }
.sf-cv-board .desk:nth-child(8) { animation-delay: 0.21s; }
.sf-cv-board .desk:nth-child(9) { animation-delay: 0.24s; }
.sf-cv-board .desk:nth-child(10) { animation-delay: 0.27s; }
.sf-cv-board .desk:nth-child(11) { animation-delay: 0.30s; }

/* ── Column Header ─────────────────────────── */
.sf-cv-board .desk-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 10px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--border, #DDE0E5) !important;
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
  height: auto !important;
  min-height: 36px !important;
  position: relative !important;
  margin: 0 !important;
}

.sf-cv-board .desk-head .desk-name {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-weight: normal !important;
  text-align: left !important;
  width: 100% !important;
  white-space: nowrap !important;
  padding: 0 !important;
}

/* Column header left (dot + label) */
.sf-cv-col-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.sf-cv-col-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sf-cv-col-label {
  font-size: 14px;
  font-weight: 600;
  color: #1A1917;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Column header right (count + queue) */
.sf-cv-col-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sf-cv-col-count {
  font-size: 11px;
  font-weight: 500;
  background: var(--surface-2, #ECEEF1);
  color: var(--text-muted, #A8A49C);
  padding: 1px 7px;
  border-radius: 10px;
  border: 1px solid var(--border, #DDE0E5);
  line-height: 1.4;
}

.sf-cv-col-queue {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #A8A49C);
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  background: transparent;
  padding: 0;
}
.sf-cv-col-queue:hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 10%, transparent);
  color: var(--primary-color, #2563EB);
}
.sf-cv-col-queue i {
  font-size: 11px !important;
  opacity: 1 !important;
  color: inherit !important;
}

/* Disabled queue button — no records */
.sf-cv-col-queue-disabled {
  opacity: 0.35 !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* ── Cards Container ───────────────────────── */
.sf-cv-board .desk-items {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow-y: auto !important;
  height: auto !important;
  max-height: calc(100vh - 305px) !important;
  min-height: 60px !important;
  padding: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: var(--border, #DDE0E5) transparent;
}
.sf-cv-board .desk-items::-webkit-scrollbar { width: 4px; }
.sf-cv-board .desk-items::-webkit-scrollbar-track { background: transparent; }
.sf-cv-board .desk-items::-webkit-scrollbar-thumb { background: var(--border, #DDE0E5); border-radius: 2px; }

.sf-cv-board .desk-items-gray {
  min-height: 60px !important;
  background: transparent !important;
}

/* ── Card (Lead Card) ──────────────────────── */
.sf-cv-board .item {
  background: #FFFFFF !important;
  border: 1px solid var(--border, #DDE0E5) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--border, #DDE0E5) !important;
  animation: sfFadeSlideUp 0.25s ease both;
}

.sf-cv-board .item:hover {
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 40%, transparent) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04) !important;
  transform: translateY(-1px);
  background: #FFFFFF !important;
}

/* Left accent stripe */
.sf-cv-board .item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--sf-cv-stripe-color, var(--primary-color, #2563EB));
  opacity: 0.35;
}

/* Card inner structure */
.sf-cv-board .item .item-container {
  height: auto !important;
}

.sf-cv-board .item .item-content {
  white-space: normal !important;
}

/* ── Card Title (detail link) ──────────────── */
.sf-cv-board .item .sf-cv-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 8px;
}

.sf-cv-board .item .sf-cv-card-title a,
.sf-cv-board .item .sf-cv-card-title span[style*="width"] a {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #3B82F6 !important;
  text-decoration: none !important;
  transition: color 0.1s;
}
.sf-cv-board .item .sf-cv-card-title a:hover {
  color: #2563EB !important;
}

/* Override inline link styles in card title */
.sf-cv-board .item .item-content > div:first-child {
  margin-bottom: 4px;
}

.sf-cv-board .item .item-content > div:first-child a {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #3B82F6 !important;
  text-decoration: none !important;
}
.sf-cv-board .item .item-content > div:first-child a:hover {
  color: #2563EB !important;
}

/* ── Card Fields ───────────────────────────── */
.sf-cv-board .item .item-content > div:not(:first-child) {
  font-size: 12px !important;
  margin-bottom: 2px !important;
  padding-left: 0 !important;
}

.sf-cv-board .item .item-content > div:not(:first-child) span {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* ── Card More Actions ─────────────────────── */
.sf-cv-board .item .item-content > div:first-child span[title] a .MuiIcon-root {
  font-size: 15px !important;
  color: var(--text-muted, #A8A49C) !important;
  opacity: 1;
}

/* ── Card Task/Appointment Section ─────────── */
.sf-cv-board .item .item-container > div:last-child {
  border-top: 1px solid var(--border-light, #E8EAED);
  margin-top: 8px;
  padding-top: 8px !important;
}

/* ── Empty Column ──────────────────────────── */
.sf-cv-board .desk-items-gray > div:first-child {
  border: 1.5px dashed var(--border, #DDE0E5) !important;
  border-radius: 10px !important;
  padding: 20px 14px !important;
  height: auto !important;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.sf-cv-board .desk-items-gray > div:first-child:hover {
  border-color: var(--primary-color, #2563EB) !important;
  background: color-mix(in srgb, var(--primary-color, #2563EB) 6%, transparent);
}
.sf-cv-board .desk-items .custom-textarea {
  font-size: 12px !important;
  color: var(--text-muted, #A8A49C) !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  height: auto !important;
  resize: none !important;
  padding: 0 !important;
}

/* ── Placeholder (drag target) ─────────────── */
.sf-cv-board .desk-items .placeholder {
  height: 80px !important;
  background: color-mix(in srgb, var(--primary-color, #2563EB) 8%, transparent) !important;
  border: 1.5px dashed color-mix(in srgb, var(--primary-color, #2563EB) 30%, transparent) !important;
  border-radius: 10px !important;
}

/* ── Column View Toolbar ───────────────────── */
.sf-cv-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid var(--border, #DDE0E5);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 2px;
}

.sf-cv-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}

.sf-cv-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Workflow select in toolbar */
.sf-cv-toolbar .MuiFormControl-root {
  min-width: 150px;
}

.sf-cv-toolbar .MuiOutlinedInput-root {
  height: 32px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  border-radius: 7px !important;
  background: #ECEEF1 !important;
  color: #1A1917 !important;
  transition: all 0.2s !important;
}

.sf-cv-toolbar .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  border: 1px solid #DDE0E5 !important;
  transition: all 0.2s !important;
}

.sf-cv-toolbar .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 40%, #DDE0E5) !important;
}

.sf-cv-toolbar .MuiOutlinedInput-root.Mui-focused {
  background: #FFFFFF !important;
}

.sf-cv-toolbar .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border: 2px solid var(--primary-color, #2563EB) !important;
}

.sf-cv-toolbar .MuiOutlinedInput-root .MuiSelect-select {
  color: #1A1917 !important;
  font-size: 13px !important;
}

.sf-cv-toolbar .MuiOutlinedInput-root .MuiSelect-icon {
  color: #706D65 !important;
}

.sf-cv-toolbar .MuiInputLabel-root {
  font-size: 14px !important;
  color: #706D65 !important;
  transform: translate(10px, 7px) scale(1) !important;
}

.sf-cv-toolbar .MuiInputLabel-shrink {
  transform: translate(14px, -6px) scale(0.85) !important;
  color: rgba(0, 0, 0, 0.6) !important;
  font-weight: 500 !important;
}

.sf-cv-toolbar .MuiInputLabel-root.Mui-focused {
  color: var(--primary-color, #2563EB) !important;
}

/* Search in toolbar */
.sf-cv-toolbar .sf-cv-search {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border, #DDE0E5);
  border-radius: 7px;
  padding: 5px 12px;
  background: var(--surface-2, #ECEEF1);
  font-size: 12px;
  transition: all 0.2s;
  min-width: 160px;
}

.sf-cv-toolbar .sf-cv-search:focus-within {
  background: #FFFFFF;
  border-color: var(--primary-color, #2563EB);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #2563EB) 12%, transparent);
}

.sf-cv-toolbar .sf-cv-search input {
  border: none;
  outline: none;
  background: none;
  font-size: 13px;
  font-family: inherit;
  color: #1A1917;
  width: 140px;
}

.sf-cv-toolbar .sf-cv-search input::placeholder {
  color: var(--text-muted, #A8A49C);
}

/* Setup icon in toolbar */
.sf-cv-toolbar .sf-cv-setup-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #A8A49C);
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  border: none;
  background: transparent;
}
.sf-cv-toolbar .sf-cv-setup-icon:hover {
  background: var(--surface-2, #ECEEF1);
  color: #1A1917;
}


/* ============================================================
   HOME PAGE v2 — Enterprise Design
   Scoped under .sf-home-page to avoid breaking other views.
   Reference: Accounts-home.html
   ============================================================ */

/* ── Grid layout ── */
.sf-home-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 0 !important;
  align-items: stretch;
}

/* ── Card container ── */
.sf-home-card {
  background: #FFFFFF;
  border: 1px solid #DDE0E5;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  width: 100% !important;
  position: relative;
  max-height: calc(100vh - 193px);
}

/* ── Card header ── */
.sf-home-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px 11px !important;
  border-bottom: 1px solid #E8EAED !important;
  background: #ECEEF1 !important;
  min-height: 48px;
  height: auto !important;
  float: none !important;
}

.sf-home-card-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1A1917;
  display: flex;
  align-items: center;
  gap: 7px;
}

.sf-home-card-title svg {
  flex-shrink: 0;
}

.sf-home-add-link {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  color: var(--primary-color, #2563EB) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  background: color-mix(in srgb, var(--primary-color, #2563EB) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary-color, #2563EB) 25%, transparent);
  border-radius: 6px;
  padding: 3px 8px;
  transition: all 0.15s;
  margin-left: 0 !important;
  cursor: pointer;
  white-space: nowrap;
}

.sf-home-add-link:hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 20%, transparent);
}

.sf-home-add-link svg {
  flex-shrink: 0;
}

/* ── Card search ── */
.sf-home-card-search {
  padding: 10px 12px;
  border-bottom: 1px solid #E8EAED;
}

.sf-home-card-search-inner {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #DDE0E5;
  border-radius: 7px;
  padding: 5px 12px;
  background: #ECEEF1;
  transition: all 0.2s;
}

.sf-home-card-search-inner:focus-within {
  background: #FFFFFF;
  border-color: var(--primary-color, #2563EB);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #2563EB) 12%, transparent);
}

.sf-home-card-search-inner input {
  border: none !important;
  outline: none !important;
  background: none !important;
  font-size: 13px !important;
  font-family: inherit;
  color: #1A1917 !important;
  width: 100% !important;
  height: auto !important;
  padding: 2px 0 !important;
}

.sf-home-card-search-inner input::placeholder {
  color: #A8A49C !important;
}

.sf-home-card-search-inner svg {
  flex-shrink: 0;
  color: #A8A49C;
}

/* ── Group status filter ── */
.sf-home-gsf {
  display: flex;
  gap: 2px;
  padding: 8px 12px;
  border-bottom: 1px solid #E8EAED;
}

.sf-home-gsf-btn {
  flex: 1;
  padding: 4px 0;
  border-radius: 6px;
  border: 1px solid transparent;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #706D65;
  cursor: pointer;
  transition: all 0.15s;
}

.sf-home-gsf-btn:hover {
  background: #ECEEF1;
  color: #1A1917;
}

.sf-home-gsf-btn.active {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 25%, transparent);
  color: var(--primary-color, #2563EB);
}

/* ── Scrollable content area ── */
.sf-home-scrollable {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.sf-home-scrollable::-webkit-scrollbar {
  width: 3px;
}

.sf-home-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.sf-home-scrollable::-webkit-scrollbar-thumb {
  background: #DDE0E5;
  border-radius: 3px;
}

/* ── Filter list items ── */
.sf-home-list-item {
  display: flex !important;
  align-items: center;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 13px;
  color: #706D65;
  transition: all 0.12s;
  text-decoration: none;
  gap: 8px;
  position: relative;
}

.sf-home-list-item:hover {
  background: #ECEEF1;
}

.sf-home-list-item:hover .sf-home-item-label,
.sf-home-list-item:hover .sf-home-item-label a {
  color: #1A1917 !important;
}

.sf-home-list-item .sf-home-item-icon {
  color: #A8A49C;
  flex-shrink: 0;
  transition: color 0.12s;
}

.sf-home-list-item:hover .sf-home-item-icon {
  color: #1A1917;
}

.sf-home-list-item .sf-home-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-home-list-item .sf-home-item-label a {
  color: #706D65 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.sf-home-list-item .sf-home-item-arrow {
  color: #DDE0E5;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s;
}

.sf-home-list-item:hover .sf-home-item-arrow {
  opacity: 1;
  color: #A8A49C;
}

/* Action icons (edit/copy/delete) — hidden by default, shown on hover */
.sf-home-list-item .sf-action-icons {
  display: none !important;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  gap: 4px;
  align-items: center;
}

.sf-home-list-item:hover .sf-action-icons {
  display: flex !important;
}

.sf-home-list-item .sf-action-icons span {
  position: static !important;
  padding: 0 !important;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #706D65 !important;
  cursor: pointer;
  transition: all 0.12s;
}

.sf-home-list-item .sf-action-icons span:hover {
  background: #DDE0E5;
  color: #1A1917 !important;
}

/* ── Group grid (2-column layout) ── */
.sf-home-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sf-home-group-item {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.12s;
  text-decoration: none;
  font-size: 13px;
  color: #706D65;
  position: relative;
}

.sf-home-group-item:hover {
  background: #ECEEF1;
}

.sf-home-group-item .sf-home-group-icon {
  color: #A8A49C;
  flex-shrink: 0;
  transition: color 0.12s;
}

.sf-home-group-item:hover .sf-home-group-icon {
  color: #1A1917;
}

.sf-home-group-item .sf-home-group-label {
  font-size: 13px;
  font-weight: 400;
  color: #706D65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.12s;
  flex: 1;
}

.sf-home-group-item .sf-home-group-label a {
  color: #706D65 !important;
  text-decoration: none !important;
  font-size: 13px !important;
}

.sf-home-group-item:hover .sf-home-group-label,
.sf-home-group-item:hover .sf-home-group-label a {
  color: #1A1917 !important;
}

/* Group action icons */
.sf-home-group-item .sf-action-icons {
  display: none !important;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  gap: 4px;
  align-items: center;
}

.sf-home-group-item:hover .sf-action-icons {
  display: flex !important;
}

.sf-home-group-item .sf-action-icons span {
  position: static !important;
  padding: 0 !important;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: #706D65 !important;
  cursor: pointer;
  transition: all 0.12s;
}

.sf-home-group-item .sf-action-icons span:hover {
  background: #DDE0E5;
  color: #1A1917 !important;
}

/* ── Recently viewed items ── */
.sf-home-recent-item {
  display: flex !important;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.12s;
  text-decoration: none;
  border-bottom: 1px solid #E8EAED;
}

.sf-home-recent-item:last-child {
  border-bottom: none;
}

.sf-home-recent-item:hover {
  background: #ECEEF1;
}

.sf-home-recent-avatar {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.sf-home-recent-name {
  font-size: 13px;
  font-weight: 500;
  color: #706D65;
  flex: 1;
  transition: color 0.1s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-home-recent-name a {
  color: #706D65 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.sf-home-recent-item:hover .sf-home-recent-name,
.sf-home-recent-item:hover .sf-home-recent-name a {
  color: #1A1917 !important;
}

.sf-home-recent-time {
  font-size: 11px;
  color: #A8A49C;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Home page container ── */
.sf-home-page {
  padding: 5px 5px 0px 15px !important;
  height: auto !important;
  overflow: visible !important;
}

.sf-home-page .filter-menu-container {
  width: 100% !important;
}

/* ═════════════════════════════════════════════════════════
   CALENDAR / TASKS v2 — Enterprise Design
   Scoped under .sf-ct-page to avoid conflicts
   ═════════════════════════════════════════════════════════ */

/* ── Page Container ── */
.sf-ct-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding: 0 4px;
}

/* ── Toolbar ── */
.sf-ct-toolbar {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #DDE0E5;
  border-radius: 8px;
  padding: 5px 12px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  gap: 8px;
}
.sf-ct-tb-left {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.sf-ct-tb-spacer {
  flex: 1;
}
.sf-ct-tb-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ── Icon Buttons ── */
.sf-ct-ig-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #DDE0E5;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #A8A49C;
  padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.sf-ct-ig-btn .fas,
.sf-ct-ig-btn .material-icons {
  font-size: 13px;
  line-height: 1;
}
.sf-ct-ig-btn:hover {
  background: #ECEEF1;
  color: #706D65;
}
.sf-ct-ig-btn.active {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 10%, #fff);
  color: var(--primary-color, #2563EB);
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 30%, #fff);
}
.sf-ct-ig-btn.active:hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 16%, #fff);
}
.sf-ct-ig-btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}


/* 2 cards: equal width columns */
.sf-home-grid:has(.sf-home-card:nth-child(2)):not(:has(.sf-home-card:nth-child(3))) {
  grid-template-columns: 1fr 1fr;
}

/* 1 card: full width */
.sf-home-grid:not(:has(.sf-home-card:nth-child(2))) {
  grid-template-columns: 1fr;
}
/* ── Mode Arrows ── */
.sf-ct-mode-arrows {
  display: flex;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  flex-shrink: 0;
}
.sf-ct-mode-arr {
  width: 28px;
  height: 28px;
  border: 1px solid #DDE0E5;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #706D65;
  padding: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.sf-ct-mode-arr:first-child {
  border-radius: 6px 0 0 6px;
  border-right: none;
}
.sf-ct-mode-arr:last-child {
  border-radius: 0 6px 6px 0;
}
.sf-ct-mode-arr:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 10%, #fff);
  color: var(--primary-color, #2563EB);
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 30%, #fff);
}
.sf-ct-mode-arr .fas {
  font-size: 12px;
  line-height: 1;
}
.sf-ct-mode-arr:disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* ── User Dropdown Trigger ── */
.sf-ct-user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #DDE0E5;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: #706D65;
  cursor: pointer;
  height: 28px;
  max-width: 180px;
  transition: border-color .15s;
  font-family: inherit;
}
.sf-ct-user-btn:hover {
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 30%, #fff);
}
.sf-ct-user-btn .material-icons {
  font-size: 14px;
  color: #A8A49C;
}

/* ── Layout Area ── */
.sf-ct-layout-area {
  flex: 1;
  display: flex;
  overflow: hidden;
  gap: 8px;
  min-height: 0;
}

/* ── Calendar Panel ── */
.sf-ct-cal-panel {
  background: #fff;
  border: 1px solid #DDE0E5;
  border-radius: 8px;
  display: flex;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  position: relative;
}
.sf-ct-layout-area[data-mode="1"] .sf-ct-cal-panel {
  width: 360px !important;
}
.sf-ct-layout-area[data-mode="2"] .sf-ct-cal-panel,
.sf-ct-layout-area[data-mode="3"] .sf-ct-cal-panel {
  flex: 1;
}

/* ── Tasks Panel ── */
.sf-ct-tasks-panel {
  flex: 1;
  background: #fff;
  border: 1px solid #DDE0E5;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  min-width: 0;
}
.sf-ct-layout-area[data-mode="2"] .sf-ct-tasks-panel {
  flex: 0 0 260px;
}
.sf-ct-layout-area[data-mode="3"] .sf-ct-tasks-panel {
  display: none;
}
.sf-ct-layout-area[data-mode="3"] {
  gap: 0;
}

/* ── Calendar Inner Layout ── */
.sf-ct-cal-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  min-width: 0;
}

/* ── Calendar Toggle Row (overlaps into Syncfusion toolbar via negative margin) ── */
.sf-ct-cal-toggle-row {
  height: 38px;
  margin-bottom: -38px;
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  padding-left: 4px;
  pointer-events: none;
}
.sf-ct-cal-toggle {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid #DDE0E5;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #A8A49C;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  padding: 0;
  font-size: 10px;
  transition: background .15s, color .15s, border-color .15s;
  pointer-events: auto;
  margin-top: 3px;
}
.sf-ct-cal-toggle:hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 10%, #fff);
  color: var(--primary-color, #2563EB);
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 30%, #fff);
}

/* Push Syncfusion toolbar content right to make room for toggle */
.sf-ct-cal-schedule-wrap .e-schedule .e-toolbar .e-toolbar-items,
.sf-ct-cal-schedule-wrap .e-schedule .e-schedule-toolbar .e-toolbar-items,
.sf-ct-cal-schedule-wrap .e-schedule .e-toolbar-items,
.sf-ct-cal-schedule-wrap .e-schedule .e-headerbar {
  padding-left: 26px !important;
}

/* ── Calendar Popup (.cal-popup equivalent) ── */
.sf-ct-cal-popup {
  position: absolute;
  top: 40px;
  left: 4px;
  background: #fff;
  border: 1px solid #DDE0E5;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  width: 230px;
  z-index: 800;
  overflow: hidden;
}
.sf-ct-cal-popup-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
}
.sf-ct-cal-popup-title {
  font-size: 15px;
  font-weight: 700;
  color: #1A1917;
}
.sf-ct-cal-popup-close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #A8A49C;
  border-radius: 4px;
  padding: 0;
  font-size: 11px;
}
.sf-ct-cal-popup-close:hover {
  background: #ECEEF1;
  color: #706D65;
}
.sf-ct-cal-popup-list {
  padding: 4px 0 12px;
  max-height: 300px;
  overflow-y: auto;
}
.sf-ct-cal-popup-list::-webkit-scrollbar {
  width: 3px;
}
.sf-ct-cal-popup-list::-webkit-scrollbar-thumb {
  background: #DDE0E5;
  border-radius: 3px;
}
.sf-ct-cal-popup-list .MuiListItem-root {
  padding: 4px 16px !important;
}
.sf-ct-cal-popup-list .MuiCheckbox-root {
  padding: 4px !important;
}

/* ── Calendar Schedule Wrapper ── */
.sf-ct-cal-schedule-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative; /* for popup positioning */
}

/* ═══════════════════════════════════════════════════
   Syncfusion Schedule — Enterprise Design
   Visual-only overrides (no layout/display changes)
   ═══════════════════════════════════════════════════ */

/* Container — remove default border/shadow (panel provides it) */
.sf-ct-page .e-schedule,
.sf-ct-cal-inner .e-schedule {
  border: none !important;
  box-shadow: none !important;
}

/* Toolbar bottom border */
.sf-ct-page .e-schedule .e-schedule-toolbar,
.sf-ct-cal-inner .e-schedule .e-schedule-toolbar {
  border-bottom: 1px solid #DDE0E5 !important;
}

/* Nav arrow buttons (.cal-hdr-btn equivalent) */
.sf-ct-page .e-schedule .e-toolbar .e-tbar-btn.e-icon-btn,
.sf-ct-cal-inner .e-schedule .e-toolbar .e-tbar-btn.e-icon-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 5px !important;
  border: none !important;
  background: transparent !important;
  color: #A8A49C !important;
  padding: 0 !important;
}
.sf-ct-page .e-schedule .e-toolbar .e-tbar-btn.e-icon-btn:hover,
.sf-ct-page .e-schedule .e-toolbar .e-tbar-btn.e-icon-btn:focus,
.sf-ct-cal-inner .e-schedule .e-toolbar .e-tbar-btn.e-icon-btn:hover,
.sf-ct-cal-inner .e-schedule .e-toolbar .e-tbar-btn.e-icon-btn:focus {
  background: #ECEEF1 !important;
  color: #706D65 !important;
}
.sf-ct-page .e-schedule .e-toolbar .e-tbar-btn.e-icon-btn .e-btn-icon,
.sf-ct-page .e-schedule .e-toolbar .e-tbar-btn.e-icon-btn .e-icons,
.sf-ct-cal-inner .e-schedule .e-toolbar .e-tbar-btn.e-icon-btn .e-btn-icon,
.sf-ct-cal-inner .e-schedule .e-toolbar .e-tbar-btn.e-icon-btn .e-icons {
  font-size: 9px !important;
  font-weight: normal !important;
}

/* Date range text — bold, dark */
.sf-ct-page .e-schedule .e-toolbar .e-date-range .e-tbar-btn,
.sf-ct-cal-inner .e-schedule .e-toolbar .e-date-range .e-tbar-btn {
  font-weight: 600 !important;
  color: #1A1917 !important;
  border-radius: 5px !important;
}
.sf-ct-page .e-schedule .e-toolbar .e-date-range .e-tbar-btn:hover,
.sf-ct-cal-inner .e-schedule .e-toolbar .e-date-range .e-tbar-btn:hover {
  background: #ECEEF1 !important;
}

/* TODAY button — bordered pill (.cal-today-btn equivalent) */
.sf-ct-page .e-schedule .e-toolbar .e-today .e-tbar-btn,
.sf-ct-cal-inner .e-schedule .e-toolbar .e-today .e-tbar-btn,
.sf-ct-today-btn {
  border: 1px solid #DDE0E5 !important;
  border-radius: 5px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #706D65 !important;
  background: #fff !important;
  padding: 3px 9px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
}
.sf-ct-page .e-schedule .e-toolbar .e-today .e-tbar-btn:hover,
.sf-ct-cal-inner .e-schedule .e-toolbar .e-today .e-tbar-btn:hover,
.sf-ct-today-btn:hover {
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 30%, #fff) !important;
  color: var(--primary-color, #2563EB) !important;
}
/* Always show custom today item */
.sf-ct-today-item {
  display: flex !important;
}
.sf-ct-today-item.e-hidden {
  display: flex !important;
}

/* Active view tab — accent pill */
.sf-ct-page .e-schedule .e-active-view .e-tbar-btn,
.sf-ct-cal-inner .e-schedule .e-active-view .e-tbar-btn {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 10%, #fff) !important;
  color: var(--primary-color, #2563EB) !important;
  border-radius: 5px !important;
  border: 1px solid color-mix(in srgb, var(--primary-color, #2563EB) 30%, #fff) !important;
}

/* Inactive view tabs — subtle */
.sf-ct-page .e-schedule .e-toolbar .e-views .e-tbar-btn:not(.e-active-view .e-tbar-btn),
.sf-ct-cal-inner .e-schedule .e-toolbar .e-views .e-tbar-btn:not(.e-active-view .e-tbar-btn) {
  border-radius: 5px !important;
  color: #706D65 !important;
}
.sf-ct-page .e-schedule .e-toolbar .e-views .e-tbar-btn:hover,
.sf-ct-cal-inner .e-schedule .e-toolbar .e-views .e-tbar-btn:hover {
  background: #ECEEF1 !important;
}

/* Overflow menu (⋮) — rounded, muted */
.sf-ct-page .e-schedule .e-toolbar .e-hor-nav,
.sf-ct-cal-inner .e-schedule .e-toolbar .e-hor-nav {
  border-radius: 5px !important;
  color: #A8A49C !important;
}
.sf-ct-page .e-schedule .e-toolbar .e-hor-nav:hover,
.sf-ct-cal-inner .e-schedule .e-toolbar .e-hor-nav:hover {
  background: #ECEEF1 !important;
  color: #706D65 !important;
}

/* Current day header — accent color */
.sf-ct-page .e-schedule .e-current-day,
.sf-ct-cal-inner .e-schedule .e-current-day {
  color: var(--primary-color, #2563EB) !important;
}

/* Time labels — muted */
.sf-ct-page .e-schedule .e-time-cells-wrap,
.sf-ct-cal-inner .e-schedule .e-time-cells-wrap,
.sf-ct-page .e-schedule .e-time-slots,
.sf-ct-cal-inner .e-schedule .e-time-slots {
  color: #A8A49C !important;
  font-size: 11px !important;
}

/* Grid cell borders — subtle */
.sf-ct-page .e-schedule .e-work-cells,
.sf-ct-cal-inner .e-schedule .e-work-cells {
  border-color: #E8EAED !important;
}

/* Cell hover — light blue tint */
.sf-ct-page .e-schedule .e-work-cells:hover,
.sf-ct-cal-inner .e-schedule .e-work-cells:hover {
  background: rgba(37, 99, 235, .04) !important;
}

/* Appointments — rounded, left accent border */
.sf-ct-page .e-schedule .e-appointment,
.sf-ct-cal-inner .e-schedule .e-appointment {
  border-radius: 4px !important;
  border-left: 2px solid !important;
}

/* Thin 3px scrollbar */
.sf-ct-page .e-schedule .e-content-wrap::-webkit-scrollbar,
.sf-ct-cal-inner .e-schedule .e-content-wrap::-webkit-scrollbar {
  width: 3px;
}
.sf-ct-page .e-schedule .e-content-wrap::-webkit-scrollbar-thumb,
.sf-ct-cal-inner .e-schedule .e-content-wrap::-webkit-scrollbar-thumb {
  background: #DDE0E5;
  border-radius: 3px;
}

/* Date header borders */
.sf-ct-page .e-schedule .e-date-header-wrap,
.sf-ct-cal-inner .e-schedule .e-date-header-wrap {
  border-color: #DDE0E5 !important;
}

.e-toolbar .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child{
 margin-left: 24px !important;
}

/* ── Global Syncfusion Schedule theme overrides ──
   High-specificity selectors to override CDN material.css pink (#e3165b) */

/* Active view button — use theme color */
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-active-view .e-tbar-btn {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 10%, #fff) !important;
  color: var(--primary-color, #2563EB) !important;
  border: 1px solid color-mix(in srgb, var(--primary-color, #2563EB) 30%, #fff) !important;
  border-radius: 5px !important;
}
.e-schedule .e-schedule-toolbar .e-toolbar-items .e-toolbar-item.e-active-view .e-tbar-btn .e-tbar-btn-text {
  color: var(--primary-color, #2563EB) !important;
}

/* Current day header text — use theme color instead of pink */
.e-schedule .e-date-header-wrap .e-header-cells.e-current-day {
  color: var(--primary-color, #2563EB) !important;
}
.e-schedule .e-date-header-wrap .e-header-cells.e-current-day .e-header-date,
.e-schedule .e-date-header-wrap .e-header-cells.e-current-day .e-header-day {
  color: var(--primary-color, #2563EB) !important;
}

/* Current date number in month view */
.e-schedule .e-month-view .e-current-date .e-date-header {
  background: var(--primary-color, #2563EB) !important;
}

/* Selected cell border — theme color */
.e-schedule .e-work-cells.e-selected-cell {
  border-color: var(--primary-color, #2563EB) !important;
}

/* ── Tasks Panel Kanban ── */
.sf-ct-kanban-wrap {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sf-ct-tasks-panel .sf-ct-kanban.kanbanBord {
  display: flex !important;
  overflow-x: auto;
  gap: 10px;
  padding: 10px;
  flex: 1;
  margin: 0 !important;
}
.sf-ct-tasks-panel .sf-ct-kanban.kanbanBord::-webkit-scrollbar {
  height: 4px;
}
.sf-ct-tasks-panel .sf-ct-kanban.kanbanBord::-webkit-scrollbar-thumb {
  background: #DDE0E5;
  border-radius: 3px;
}

/* ── Task Column (.desk.sf-desk) ── */
.sf-ct-tasks-panel .desk.sf-desk {
  flex: 1 1 0 !important;
  min-width: 160px !important;
  width: auto !important;
  background: #F7F8FA !important;
  border: 1px solid #E8EAED !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Task Column Header ── */
.sf-ct-tasks-panel .desk.sf-desk > .desk-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 10px !important;
  background: #fff !important;
  border-bottom: 1px solid #DDE0E5 !important;
  flex-shrink: 0 !important;
  min-height: auto !important;
  height: auto !important;
}
.sf-ct-tasks-panel .desk.sf-desk > .desk-head .desk-name {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
}
/* Header inner wrapper — flex row, items grouped left, queue btn pushed right via auto margin */
.sf-ct-tasks-panel .desk.sf-desk > .desk-head .desk-name > div:first-child {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important;
  overflow: visible !important;
}

/* Label group: dot (::before) + name + count — stays left */
.sf-ct-tasks-panel .desk.sf-desk .sf-desk-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1A1917 !important;
  max-width: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-left: 5px !important;
}

/* Count pill badge (.k-cnt equivalent) */
.sf-ct-tasks-panel .desk.sf-desk .sf-desk-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  background: #ECEEF1 !important;
  border: 1px solid #DDE0E5 !important;
  color: #A8A49C !important;
  padding: 0 5px !important;
  border-radius: 8px !important;
  line-height: 1.6 !important;
  margin-left: 6px !important;
  flex-shrink: 0 !important;
}

/* ── Queue Button (.k-add equivalent) — right side ── */
.sf-ct-tasks-panel .desk.sf-desk > .desk-head [title="Queue"] {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  max-height: 22px !important;
  border: 1px solid #DDE0E5 !important;
  background: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  float: none !important;
  margin: 0 0 0 auto !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  color: #706D65 !important;
}
.sf-ct-tasks-panel .desk.sf-desk > .desk-head [title="Queue"]:hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 10%, #fff) !important;
  color: var(--primary-color, #2563EB) !important;
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 30%, #fff) !important;
}
.sf-ct-tasks-panel .desk.sf-desk > .desk-head [title="Queue"] .fas {
  font-size: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  opacity: 1 !important;
  line-height: 1 !important;
  position: static !important;
}

/* ── Task Cards Container ── */
.sf-ct-tasks-panel .desk.sf-desk > .desk-items,
.sf-ct-tasks-panel .desk.sf-desk > div:last-child:not(.desk-head) {
  flex: 1 !important;
  overflow-y: auto !important;
  background: #F4F5F7 !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}
.sf-ct-tasks-panel .desk.sf-desk > div:last-child:not(.desk-head)::-webkit-scrollbar {
  width: 3px;
}
.sf-ct-tasks-panel .desk.sf-desk > div:last-child:not(.desk-head)::-webkit-scrollbar-thumb {
  background: #DDE0E5;
  border-radius: 3px;
}

/* ── Individual Task Card ── */
.sf-ct-tasks-panel .desk.sf-desk .item {
  background: #fff !important;
  border: 1px solid #DDE0E5 !important;
  border-radius: 6px !important;
  padding: 10px 11px !important;
  cursor: pointer !important;
  transition: border-color .15s, box-shadow .15s !important;
  margin: 0 !important;
}
.sf-ct-tasks-panel .desk.sf-desk .item:hover {
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 30%, #fff) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04) !important;
}

/* ── Column Header Colored Dots ── */
.sf-ct-tasks-panel .desk.sf-desk > .desk-head .desk-name > div:first-child::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  background: var(--sf-cv-stripe-color, #6B7280);
}

/* ── Onboarding Status Summary (below column name) ── */
.sf-ct-tasks-panel .desk.sf-desk .sf-ob-status-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding-top: 4px !important;
}
.sf-ct-tasks-panel .desk.sf-desk .sf-ob-status-tag {
  font-size: 9px !important;
  font-weight: 600 !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
  background: #ECEEF1 !important;
  color: #706D65 !important;
}
.sf-ob-status-tag.sf-ob-status-overdue {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
}
.sf-ob-status-tag.sf-ob-status-pending {
  background: #FEF3C7 !important;
  color: #B45309 !important;
}
.sf-ob-status-tag.sf-ob-status-inprogress {
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
}
.sf-ob-status-tag.sf-ob-status-completed {
  background: #DCFCE7 !important;
  color: #15803D !important;
}
.sf-ob-status-tag.sf-ob-status-notstarted {
  background: #F3F4F6 !important;
  color: #6B7280 !important;
}
.sf-ct-tasks-panel .desk.sf-desk[data-column="Overdue"] > .desk-head .desk-name > div:first-child::before {
  background: #DC2626;
}
.sf-ct-tasks-panel .desk.sf-desk[data-column="Today"] > .desk-head .desk-name > div:first-child::before {
  background: #2563EB;
}
.sf-ct-tasks-panel .desk.sf-desk[data-column="Tomorrow"] > .desk-head .desk-name > div:first-child::before {
  background: #D97706;
}
.sf-ct-tasks-panel .desk.sf-desk[data-column="Next 7 days"] > .desk-head .desk-name > div:first-child::before {
  background: #16A34A;
}
.sf-ct-tasks-panel .desk.sf-desk[data-column="Future"] > .desk-head .desk-name > div:first-child::before {
  background: #7C3AED;
}

/* ── Hide Task Type Icon (reference has no icon before title) ── */
.sf-ct-tasks-panel .item .item-content > div:first-child > span:has(> .fa),
.sf-ct-tasks-panel .item .item-content > div:first-child > span:has(> .material-icons:not(.MuiIcon-root)) {
  display: none !important;
}

/* ── Task Card Title Row (.tc-top equivalent) ── */
.sf-ct-tasks-panel .item .item-content > div:first-child {
  margin-bottom: 7px !important;
  gap: 6px !important;
  align-items: center !important;
}

/* ── Task Card Title Text (.tc-title equivalent) ── */
.sf-ct-tasks-panel .item .item-content > div:first-child a,
.sf-ct-tasks-panel .item .item-content > div:first-child .dpvalue {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1A1917 !important;
  line-height: 1.4 !important;
}

/* ── Task Card More Button (.tc-more equivalent) ── */
.sf-ct-tasks-panel .item .item-content > div:first-child > span:last-child {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 3px !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}
.sf-ct-tasks-panel .item .item-content > div:first-child > span:last-child a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.sf-ct-tasks-panel .item .item-content > div:first-child > span:last-child .MuiIcon-root {
  font-size: 14px !important;
  color: #A8A49C !important;
}
.sf-ct-tasks-panel .item .item-content > div:first-child > span:last-child:hover {
  background: #DDE0E5 !important;
}
.sf-ct-tasks-panel .item .item-content > div:first-child > span:last-child:hover .MuiIcon-root {
  color: #706D65 !important;
}

/* ── Task Card Body Fields (.tc-body equivalent — 4px gap) ── */
.sf-ct-tasks-panel .item .item-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.sf-ct-tasks-panel .item .item-content > div:first-child {
  margin-bottom: 3px !important;
}
.sf-ct-tasks-panel .item [data-field] {
  margin: 0 !important;
}

/* ── Task Card Status Badge (.tc-status equivalent) ── */
.sf-ct-tasks-panel .item [data-field="status"] {
  margin-bottom: 1px !important;
  overflow: visible !important;
}
.sf-ct-tasks-panel .item [data-field="status"] span {
  display: inline-block !important;
  width: fit-content !important;
  white-space: nowrap !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  line-height: 1.4 !important;
  background: #FEF3C7 !important;
  color: #B45309 !important;
}
.sf-ct-tasks-panel .item [data-field="status"][title*="Completed"] span,
.sf-ct-tasks-panel .item [data-field="status"][title*="completed"] span {
  background: #DCFCE7 !important;
  color: #15803D !important;
}
.sf-ct-tasks-panel .item [data-field="status"][title*="In-progress"] span,
.sf-ct-tasks-panel .item [data-field="status"][title*="In-Progress"] span {
  background: #DBEAFE !important;
  color: #1D4ED8 !important;
}
.sf-ct-tasks-panel .item [data-field="status"][title*="Cancelled"] span,
.sf-ct-tasks-panel .item [data-field="status"][title*="cancelled"] span {
  background: #FEE2E2 !important;
  color: #B91C1C !important;
}
.sf-ct-tasks-panel .item [data-field="status"][title*="Not Started"] span,
.sf-ct-tasks-panel .item [data-field="status"][title*="not started"] span {
  background: #F3F4F6 !important;
  color: #6B7280 !important;
}

/* ── Task Card Date (.tc-date equivalent) ── */
.sf-ct-tasks-panel .item [data-field="dateField"] span,
.sf-ct-tasks-panel .item [data-field="hdndateField"] span {
  font-size: 10px !important;
  color: #A8A49C !important;
}

/* ── Task Card Row Fields (.tc-row + .tc-link equivalent) ── */
.sf-ct-tasks-panel .item [data-field="fullname"],
.sf-ct-tasks-panel .item [data-field="company"],
.sf-ct-tasks-panel .item [data-field="partner"] {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.sf-ct-tasks-panel .item [data-field="fullname"] span,
.sf-ct-tasks-panel .item [data-field="company"] span,
.sf-ct-tasks-panel .item [data-field="partner"] span {
  font-size: 10px !important;
  color: var(--primary-color, #2563EB) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.sf-ct-tasks-panel .item [data-field="fullname"] span:hover,
.sf-ct-tasks-panel .item [data-field="company"] span:hover,
.sf-ct-tasks-panel .item [data-field="partner"] span:hover {
  text-decoration: underline !important;
}
.sf-ct-tasks-panel .item [data-field="fullname"] .fa,
.sf-ct-tasks-panel .item [data-field="company"] .fa,
.sf-ct-tasks-panel .item [data-field="partner"] .fa {
  font-size: 10px !important;
  color: #A8A49C !important;
  flex-shrink: 0 !important;
}

/* ── Mode 2: Vertical kanban, Today only ── */
.sf-ct-layout-area[data-mode="2"] .sf-ct-tasks-panel .sf-ct-kanban.kanbanBord {
  overflow-x: hidden;
  overflow-y: auto;
  flex-direction: column;
  gap: 0;
  padding: 8px;
}
.sf-ct-layout-area[data-mode="2"] .sf-ct-tasks-panel .desk.sf-desk {
  flex: 0 0 auto !important;
  width: 100% !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #DDE0E5 !important;
}
.sf-ct-layout-area[data-mode="2"] .sf-ct-tasks-panel .desk.sf-desk:last-child {
  border-bottom: none !important;
}
.sf-ct-layout-area[data-mode="2"] .sf-ct-tasks-panel .desk:not([data-column="Today"]) {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   DETAIL VIEW + NOTES v2 — Enterprise Design
   ═══════════════════════════════════════════════════════════════ */

/* ── A. Detail View Layout ─────────────────── */
.sf-dv-wrapper.taskMain.adetailview {
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.sf-dv-layout {
  display: grid !important;
  grid-template-columns: 200px 1fr 260px !important;
  gap: 14px !important;
  align-items: start !important;
}

.sf-dv-layout:not(:has(> .sf-dv-right-panel)) {
  grid-template-columns: 200px 1fr !important;
}

.sf-dv-left-panel {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.13) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  width: auto !important;
  border-right: none !important;
  font-size: 13px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* ── LEFT PANEL FIELDS — Enterprise Design ────────────── */

/* Container: reset padding, card-body padding handled by children */
.sf-dv-left-panel .detailview-fields-container {
  padding-bottom: 10px !important;
}

/* Header row (star rating + settings gear) — card-hdr style */
.sf-dv-left-panel .sf-dv-fields-hdr {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 13px !important;
  margin-bottom: 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* Star rating container */
.sf-dv-left-panel .sf-dv-fields-hdr > div:first-child {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  font-size: 16px !important;
}

/* Star icons — filled gold */
.sf-dv-left-panel .fa.fa-star {
  color: #F59E0B !important;
}

/* Star icons — empty outline */
.sf-dv-left-panel .fa.fa-star-o {
  color: rgba(0,0,0,0.13) !important;
}

/* Lead score number */
.sf-dv-left-panel .sf-dv-fields-hdr > div:first-child > span {
  font-size: 12px !important;
  color: #5C5A56 !important;
  padding-left: 3px !important;
}

/* Settings gear icon */
.sf-dv-left-panel .sf-dv-fields-hdr > span {
  float: none !important;
  padding-right: 0 !important;
  margin-left: auto !important;
}
.sf-dv-left-panel .sf-dv-fields-hdr .material-icons {
  color: #A8A49C !important;
  float: none !important;
  margin-top: 0 !important;
  font-size: 16px !important;
}
.sf-dv-left-panel .sf-dv-fields-hdr .material-icons:hover {
  color: #5C5A56 !important;
}

/* Fields body — card-body padding */
.sf-dv-left-panel .sf-dv-fields-body {
  padding: 0 13px !important;
}

/* Field group — info-group spacing */
.sf-dv-left-panel .detailViewFieldData {
  margin-bottom: 9px !important;
}
.sf-dv-left-panel .detailViewFieldData:last-child {
  margin-bottom: 0 !important;
}

/* Field label span — info-label style (uppercase, small, muted) */
.sf-dv-left-panel .detailViewFieldDataLabel {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #A8A49C !important;
  padding-top: 5px !important;
}

/* Field label container — override inline fieldsLabel styles */
.sf-dv-left-panel .detailViewFieldData > .detailViewFields_hover:first-child {
  color: #A8A49C !important;
  font-size: 10px !important;
  height: auto !important;
}

/* ── Field Action Buttons (Edit / Copy) — Modern Hover ────── */

/* Hidden by default — global rule already sets display:none, reinforce it */
.sf-dv-left-panel .detailViewFields_hover i.sf-dv-field-btn {
  display: none !important;
}

/* Show on row hover — styled as small rounded buttons */
.sf-dv-left-panel .detailViewFields_hover:hover i.sf-dv-field-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  color: #A8A49C !important;
  cursor: pointer !important;
  float: right !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-right: 0 !important;
  margin-right: 2px !important;
  position: relative !important;
  z-index: 2 !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}

/* Individual button hover — subtle bg + darker icon */
.sf-dv-left-panel .detailViewFields_hover:hover i.sf-dv-field-btn:hover {
  background: #ECEEF1 !important;
  color: #1A1917 !important;
}

/* Active/pressed state */
.sf-dv-left-panel .detailViewFields_hover:hover i.sf-dv-field-btn:active {
  background: #DDE0E5 !important;
  transform: scale(0.94);
}

/* Field value container — override inline fieldsRecord color */
.sf-dv-left-panel .detailViewFieldData > div:nth-child(2) {
  color: #1A1917 !important;
}

/* Field value text — info-value style */
.sf-dv-left-panel .detailViewFieldDataLabel1 {
  font-size: 13px !important;
  color: #1A1917 !important;
}
.sf-dv-left-panel .detailViewFieldData2 {
  font-size: 13px !important;
  color: #1A1917 !important;
}

/* Link values (email, phone, sales rep) */
.sf-dv-left-panel .sf-dv-fields-body a {
  color: var(--primary-color, #2563EB) !important;
  cursor: pointer !important;
  font-size: 12px !important;
}

/* Phone/mobile icons — always visible, muted */
.sf-dv-left-panel .fa.fa-phone,
.sf-dv-left-panel .fa.fa-mobile {
  color: #A8A49C !important;
  font-size: 12px !important;
  opacity: 1 !important;
}

/* Primary contact dropdown section */
.sf-dv-left-panel .detailview-fields-container > div:nth-child(2) {
  padding: 0 13px !important;
}

.sf-dv-center-panel {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.13) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  min-width: 0 !important;
  flex: none !important;
  width: auto !important;
  overflow: hidden !important;
  padding: 0 !important;
  font-size: 12px !important;
}

/* Child-objects wrapper: remove extra spacing above tabs */
.sf-dv-child-wrap {
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Notes outer wrapper: normalize font-size & padding */
.sf-dv-center-panel .actionHome {
  font-size: 12px !important;
  padding-top: 0 !important;
}

/* Child list-view toolbar: remove border-radius inside detail view */
.sf-dv-center-panel .sf-lv-header-wrap {
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
}

.sf-dv-right-panel {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  border-left: none !important;
  overflow: visible !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* ── B. Child Tabs ────────────────────────── */
.sf-dv-tabs-bar {
  display: flex !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  padding: 0 4px !important;
  background: #FFFFFF !important;
  overflow-x: auto !important;
  flex-shrink: 0 !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  min-height: 2.5rem;
}
.sf-dv-tabs-bar::-webkit-scrollbar { display: none; }

.sf-dv-tab {
  padding: 9px 12px !important;
  font-size: 12px !important;
  color: #706D65 !important;
  cursor: pointer !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  white-space: nowrap !important;
  user-select: none;
  transition: color 0.15s;
  display: inline-block !important;
  width: auto !important;
  padding-bottom: 9px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  flex-shrink: 0 !important;
}
.sf-dv-tab:hover { color: #1A1917 !important; }

.sf-dv-tab.sf-dv-tab-active {
  color: var(--primary-color, #2563EB) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--primary-color, #2563EB) !important;
}

.sf-dv-tab span { margin: 0 !important; font-size: 12px !important; }

/* Override inner tab wrapper structure */
.sf-dv-tabs-bar #childTabsLists {
  display: block !important;
  width: auto !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
}
.sf-dv-tabs-bar #childTabsLists > div {
  font-size: 12px !important;
  width: auto !important;
}
.sf-dv-tabs-bar .overflow-x {
  white-space: nowrap !important;
  overflow-x: hidden !important;
}
.sf-dv-tabs-bar .overflow-x:hover {
  overflow-x: overlay !important;
}
.sf-dv-tabs-bar .overflow-x::-webkit-scrollbar { height: 4px !important; }
.sf-dv-tabs-bar .overflow-x::-webkit-scrollbar-track { background: transparent !important; }
.sf-dv-tabs-bar .overflow-x::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2) !important; border-radius: 10px !important; }
.sf-dv-tabs-bar .overflow-x::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.35) !important; }
.sf-dv-tabs-bar .overflow-x::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; }
.sf-dv-tabs-bar .sf-dv-tab { font-size: 12px !important; }
.sf-dv-tabs-bar .sf-dv-tab span { font-size: 13px !important; }

/* Customize child icon — align vertically in tab bar */
.sf-dv-tabs-bar > div:last-child:not(#childTabsLists) {
  /* display: flex !important; */
  align-items: center !important;
  margin-top: 0 !important;
  padding-left: 8px !important;
  flex-shrink: 0 !important;
  padding-right: 6px;
}

/* ── C. Notes Toolbar ─────────────────────── */
.sf-notes-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 13px !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  background: #FFFFFF !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  height: auto !important;
  justify-content: flex-start !important;
}
/* Toolbar inner flex: don't force full width, let it flow */
.sf-notes-toolbar > div:first-child {
  width: auto !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Add Note button */
.sf-notes-add-btn.MuiButton-root {
  background: var(--primary-color, #2563EB) !important;
  color: #FFFFFF !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  padding: 5px 11px !important;
  min-width: auto !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  border: none !important;
  height: 28px !important;
}
.sf-notes-add-btn.MuiButton-root:hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 85%, #000) !important;
}
.sf-notes-add-btn.MuiButton-root .MuiButton-startIcon i {
  color: #FFFFFF !important;
  font-size: 11px !important;
}

/* Type filter select */
.sf-notes-type-filter .MuiOutlinedInput-root {
  background: #ECEEF1 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  height: 28px !important;
}
.sf-notes-type-filter .MuiOutlinedInput-notchedOutline {
  border: 1px solid rgba(0,0,0,0.13) !important;
}
.sf-notes-type-filter .MuiSelect-select {
  padding: 4px 26px 4px 8px !important;
  font-size: 12px !important;
}

/* Author filter select */
.sf-notes-author-filter .MuiOutlinedInput-root {
  background: #ECEEF1 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  height: 28px !important;
}
.sf-notes-author-filter .MuiOutlinedInput-notchedOutline {
  border: 1px solid rgba(0,0,0,0.13) !important;
}
.sf-notes-author-filter .MuiSelect-select {
  padding: 4px 26px 4px 8px !important;
  font-size: 12px !important;
}

/* Search field */
.sf-notes-search {
  background: #ECEEF1 !important;
  border: 1px solid rgba(0,0,0,0.13) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  height: 28px !important;
  width: auto !important;
  flex: 1 !important;
  min-width: 100px !important;
}
.sf-notes-search .MuiInputBase-root {
  font-size: 12px !important;
  margin-left: 4px !important;
}
.sf-notes-search .MuiIconButton-root {
  padding: 2px !important;
}
.sf-notes-search .MuiIconButton-root svg {
  width: 16px !important;
  height: 16px !important;
}

/* Pagination */
.sf-notes-pagination {
  flex-shrink: 0 !important;
}

/* Toolbar select-all checkbox — native input matching reference .nt-cb */
input.sf-notes-cb {
  width: 12px !important;
  height: 12px !important;
  accent-color: var(--primary-color, #2563EB) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

/* Note entry checkbox — native input matching reference .note-cb-item */
.sf-note-cb-item {
  width: 12px !important;
  height: 12px !important;
  accent-color: var(--primary-color, #2563EB) !important;
  cursor: pointer !important;
}

/* Archive icon in toolbar */
.sf-notes-archive-ico {
  width: 26px !important;
  height: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(0,0,0,0.13) !important;
  border-radius: 6px !important;
  background: #ECEEF1 !important;
  cursor: pointer !important;
  color: #5C5A56 !important;
  flex-shrink: 0 !important;
  transition: background 0.15s !important;
  margin-top: 0 !important;
  margin-left: 0 !important;
}
.sf-notes-archive-ico:hover {
  background: #FFFFFF !important;
  color: #1A1917 !important;
}
.sf-notes-archive-ico .MuiIcon-root {
  font-size: 14px !important;
  padding: 0 !important;
}

/* ── D. Note Entries ──────────────────────── */
.sf-note-entry {
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  transition: background 0.12s !important;
  position: relative !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: normal !important;
}
.sf-note-entry:first-child { border-top: none !important; }
.sf-note-entry:hover { background: #FAFBFC !important; }
.sf-note-entry:hover .sf-note-actions {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.sf-note-pinned {
  border-left: 3px solid var(--primary-color, #2563EB) !important;
  background: color-mix(in srgb, var(--primary-color, #2563EB) 8%, #FFFFFF) !important;
}
.sf-note-pinned:hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 12%, #FFFFFF) !important;
}

.sf-note-starred {
  border-left: 3px solid var(--primary-color, #2563EB) !important;
}
.sf-note-starred:hover { background: #FFFCF0 !important; }

.sf-note-pinned.sf-note-starred {
  border-left: 3px solid var(--primary-color, #2563EB) !important;
  background: #FFFEF5 !important;
}

.sf-note-inner {
  display: flex !important;
  gap: 8px !important;
  padding: 11px 13px !important;
  width: 100% !important;
}

.sf-note-cb-wrap {
  padding-top: 4px !important;
  flex-shrink: 0 !important;
  width: auto !important;
}

.sf-note-main {
  flex: 1 !important;
  min-width: 0 !important;
}

.sf-note-hdr {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  padding: 0 !important;
  min-height: auto !important;
  border-left: none !important;
  margin-left: 0 !important;
  margin-bottom: 5px !important;
  background: transparent !important;
  color: inherit !important;
  max-height: none !important;
}
/* Remove inline paddingLeft on header content div */
.sf-note-hdr > div:first-child {
  padding-left: 0 !important;
  font-weight: normal !important;
}

.sf-note-author {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1A1917 !important;
}

.sf-note-sep {
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: rgba(0,0,0,0.13) !important;
  margin: 0 5px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.sf-note-date {
  font-size: 12px !important;
  color: #5C5A56 !important;
  font-weight: normal !important;
}

.sf-note-pill {
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 1px 7px !important;
  border-radius: 20px !important;
  margin-left: 7px !important;
  white-space: nowrap !important;
  display: inline-block !important;
}
.sf-note-pill-note { background: #ECEEF1 !important; color: #5C5A56 !important; }
.sf-note-pill-email { background: #EEF3FF !important; color: #1E40AF !important; }
.sf-note-pill-call { background: #F0FDF4 !important; color: #166534 !important; }
.sf-note-pill-meeting { background: #F5F3FF !important; color: #5B21B6 !important; }
.sf-note-pill-system { background: #ECEEF1 !important; color: #5C5A56 !important; }
.sf-note-pill-appointment { background: #FFF7ED !important; color: #9A3412 !important; }
.sf-note-pill-lvm { background: #FDF4FF !important; color: #7E22CE !important; }
.sf-note-pill-dialed { background: #F0FDF4 !important; color: #166534 !important; }
.sf-note-pill-payment { background: #FFFBEB !important; color: #B45309 !important; }
.sf-note-pill-correctiveaction { background: #FEF2F2 !important; color: #DC2626 !important; }
.sf-note-pill-eventbrite { background: #F5F3FF !important; color: #5B21B6 !important; }
.sf-note-pill-sales { background: #F0FDF4 !important; color: #166534 !important; }
.sf-note-pill-touchcampaign { background: #EEF3FF !important; color: #1E40AF !important; }
.sf-note-pill-spoke { background: #F0FDF4 !important; color: #166534 !important; }
.sf-note-pill-task { background: #EEF3FF !important; color: #1E40AF !important; }
.sf-note-pill-transferred { background: #F5F3FF !important; color: #5B21B6 !important; }
.sf-note-pill-broadcastcampaign { background: #EEF3FF !important; color: #1E40AF !important; }

/* Default pill style for any unmatched note type */
.sf-note-pill[class*="sf-note-pill-"]:not(.sf-note-pill-note):not(.sf-note-pill-email):not(.sf-note-pill-call):not(.sf-note-pill-meeting):not(.sf-note-pill-system):not(.sf-note-pill-appointment):not(.sf-note-pill-lvm):not(.sf-note-pill-dialed):not(.sf-note-pill-payment):not(.sf-note-pill-correctiveaction):not(.sf-note-pill-eventbrite):not(.sf-note-pill-sales) {
  background: #ECEEF1 !important;
  color: #5C5A56 !important;
}

/* Type icon — 20x20 colored square before author name */
.sf-note-type-icon {
  width: 20px !important;
  height: 20px !important;
  border-radius: 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-right: 6px !important;
  font-family: FontAwesome !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: normal !important;
  -webkit-font-smoothing: antialiased !important;
}
/* Default icon for unmatched types — MUST come first so specifics override */
.sf-note-type-icon::before { content: "\f016"; color: #5C5A56; }
/* Type icon glyphs via ::before */
.sf-note-ti-note::before { content: "\f040"; color: #5C5A56; }
.sf-note-ti-email::before { content: "\f0e0"; color: #1E40AF; }
.sf-note-ti-call::before { content: "\f095"; color: #166534; }
.sf-note-ti-meeting::before { content: "\f073"; color: #5B21B6; }
.sf-note-ti-system::before { content: "\f013"; color: #5C5A56; }
.sf-note-ti-appointment::before { content: "\f073"; color: #9A3412; }
.sf-note-ti-lvm::before { content: "\f095"; color: #7E22CE; }
.sf-note-ti-dialed::before { content: "\f095"; color: #166534; }
.sf-note-ti-broadcastcampaign::before { content: "\f0e0"; color: #1E40AF; }
.sf-note-ti-sales::before { content: "\f201"; color: #166534; }
.sf-note-ti-payment::before { content: "\f155"; color: #B45309; }
.sf-note-ti-correctiveaction::before { content: "\f071"; color: #DC2626; }
.sf-note-ti-eventbrite::before { content: "\f272"; color: #5B21B6; }
.sf-note-ti-touchcampaign::before { content: "\f0e0"; color: #1E40AF; }
.sf-note-ti-broadcastcampaign::before { content: "\f1eb"; color: #1E40AF; }
.sf-note-ti-spoke::before { content: "\f075"; color: #166534; }
.sf-note-ti-task::before { content: "\f046"; color: #1E40AF; }
.sf-note-ti-transferred::before { content: "\f0ec"; color: #5B21B6; }

/* Type icon backgrounds for all types */
.sf-note-ti-touchcampaign { background: #EEF3FF !important; }
.sf-note-ti-spoke { background: #F0FDF4 !important; }
.sf-note-ti-task { background: #EEF3FF !important; }
.sf-note-ti-transferred { background: #F5F3FF !important; }
.sf-note-ti-note { background: #ECEEF1 !important; }
.sf-note-ti-email { background: #EEF3FF !important; }
.sf-note-ti-call { background: #F0FDF4 !important; }
.sf-note-ti-meeting { background: #F5F3FF !important; }
.sf-note-ti-system { background: #ECEEF1 !important; }
.sf-note-ti-appointment { background: #FFF7ED !important; }
.sf-note-ti-lvm { background: #FDF4FF !important; }
.sf-note-ti-dialed { background: #F0FDF4 !important; }
.sf-note-ti-broadcastcampaign { background: #EEF3FF !important; }
.sf-note-ti-sales { background: #F0FDF4 !important; }
.sf-note-ti-payment { background: #FFFBEB !important; }
.sf-note-ti-correctiveaction { background: #FEF2F2 !important; }
.sf-note-ti-eventbrite { background: #F5F3FF !important; }

/* Default type icon for unmatched types */
.sf-note-type-icon[class*="sf-note-ti-"]:not(.sf-note-ti-note):not(.sf-note-ti-email):not(.sf-note-ti-call):not(.sf-note-ti-meeting):not(.sf-note-ti-system):not(.sf-note-ti-appointment):not(.sf-note-ti-lvm):not(.sf-note-ti-dialed):not(.sf-note-ti-broadcastcampaign):not(.sf-note-ti-sales):not(.sf-note-ti-payment):not(.sf-note-ti-correctiveaction):not(.sf-note-ti-eventbrite) {
  background: #ECEEF1 !important;
}

/* Pin/Star indicators — always visible inline */
.sf-note-indicators {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: 6px !important;
}
.sf-note-ind-pin {
  color: var(--primary-color, #2563EB) !important;
  display: flex !important;
  align-items: center !important;
  font-size: 10px !important;
}
.sf-note-ind-star {
  color: var(--primary-color, #2563EB) !important;
  display: flex !important;
  align-items: center !important;
  font-size: 10px !important;
}

.sf-note-body {
  font-size: 13px !important;
  color: #5C5A56 !important;
  line-height: 1.6 !important;
  padding: 0 !important;
  margin-top: 0 !important;
}
/* Override inline marginTop:10px and lineHeight:16px on inner body div */
.sf-note-body > div {
  margin-top: 0 !important;
  line-height: 1.6 !important;
}

.sf-note-body-wrap {
  border-left: none !important;
  margin-left: 0 !important; /* now inside sf-note-main, no offset needed */
  margin-top: 0 !important;
  padding-top: 0 !important;
  width: auto !important;
}

.sf-note-actions {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.15s !important;
  display: flex !important;
  gap: 2px !important;
  align-items: flex-start !important;
  padding-top: 1px !important;
  flex-shrink: 0 !important;
  float: none !important;
  margin-top: 0 !important;
  position: static !important;
  padding-right: 0 !important;
}

.sf-note-actions > span {
  width: 25px !important;
  height: 25px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(0,0,0,0.13) !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  cursor: pointer !important;
  color: #A8A49C !important;
  transition: all 0.15s !important;
}
.sf-note-actions > span:hover {
  border-color: color-mix(in srgb, var(--primary-color, #2563EB) 40%, transparent) !important;
  color: var(--primary-color, #2563EB) !important;
  background: color-mix(in srgb, var(--primary-color, #2563EB) 8%, #FFFFFF) !important;
}
.sf-note-actions > span i,
.sf-note-actions > span .MuiIcon-root {
  font-size: 12px !important;
}

/* ── E. AI Summary Row ────────────────────── */
.sf-note-entry.sf-note-ai,
.sf-note-entry.sf-note-ai.sf-note-pinned,
.sf-note-entry.sf-note-ai.sf-note-starred {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 5%, #FFFFFF) !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  border-left: none !important;
  border-top: none !important;
  padding: 0 !important;
  line-height: normal !important;
}
.sf-note-entry.sf-note-ai:hover { background: color-mix(in srgb, var(--primary-color, #2563EB) 7%, #FFFFFF) !important; }

/* Hide checkbox for AI summary */
.sf-note-entry.sf-note-ai .sf-note-cb-wrap { display: none !important; }

/* AI row: let main fill full width */
.sf-note-entry.sf-note-ai .sf-note-inner { padding: 0 !important; gap: 0 !important; }
.sf-note-entry.sf-note-ai .sf-note-main { width: 100% !important; }

/* AI row wrapper — override inline bg/border */
.sf-ai-row {
  background: transparent !important;
  border-left: none !important;
  padding: 0 !important;
  padding-top: 4px !important;
  color: inherit !important;
  min-height: auto !important;
  max-height: none !important;
}

/* AI header row — clickable bar */
.sf-ai-row > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 13px !important;
  cursor: pointer !important;
  user-select: none !important;
  font-weight: normal !important;
  background: transparent !important;
  border-left: none !important;
}
/* Fix inner wrapper: override constrained height/lineHeight */
.sf-ai-row > div:first-child > div {
  height: auto !important;
  line-height: normal !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* AI badge — pill with accent styling */
.sf-ai-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 8px !important;
  background: color-mix(in srgb, var(--primary-color, #2563EB) 10%, #FFFFFF) !important;
  border: 1px solid color-mix(in srgb, var(--primary-color, #2563EB) 30%, #FFFFFF) !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--primary-color, #2563EB) !important;
  white-space: nowrap !important;
  margin-right: 0 !important;
  background-color: color-mix(in srgb, var(--primary-color, #2563EB) 10%, #FFFFFF) !important;
}

/* Style the toggle icon next to AI badge as a chevron */
.sf-ai-badge + div {
  margin-left: 6px !important;
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.sf-ai-badge + div i {
  font-size: 12px !important;
  color: #A8A49C !important;
  margin-right: 0 !important;
  transition: transform 0.25s ease !important;
}

/* AI label — date + author line */
.sf-ai-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #A8A49C !important;
  flex: 1 !important;
  margin-right: 8px !important;
}

/* AI refresh link */
.sf-ai-refresh {
  font-size: 11px !important;
  color: var(--primary-color, #2563EB) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  margin-left: 4px !important;
  white-space: nowrap !important;
}
.sf-ai-refresh:hover { text-decoration: underline !important; }

/* AI content body — white card */
.sf-ai-content {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: 8px !important;
  padding: 11px 13px !important;
  font-size: 12px !important;
  color: #5C5A56 !important;
  line-height: 1.65 !important;
  margin: 0 13px 12px !important;
  margin-top: 0 !important;
  display: block !important;
  flex-direction: column !important;
  scroll-behavior: smooth !important;
}

/* AI content paragraphs — match notes-screen.html .ai-content */
.sf-ai-content p {
  font-size: 12px !important;
  margin-bottom: 7px !important;
  line-height: 1.65 !important;
  color: #5C5A56 !important;
}
.sf-ai-content p:last-child { margin-bottom: 0 !important; }
.sf-ai-content strong { color: #1A1917 !important; font-weight: 500 !important; }
.sf-ai-content ul,
.sf-ai-content ol,
.sf-ai-content li {
  font-size: 12px !important;
  line-height: 1.65 !important;
  color: #5C5A56 !important;
}

/* AI disclaimer text */
.sf-ai-disclaimer-text {
  display: block !important;
  margin-top: 8px !important;
  font-size: 10px !important;
  color: #A8A49C !important;
  font-style: italic !important;
}

/* AI note body card */
.sf-ai-body-card {
  margin: 4px 8px 10px 8px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-size: 12px !important;
  color: #5C5A56 !important;
  line-height: 1.65 !important;
}
.sf-ai-body-card p {
  font-size: 12px !important;
  color: #5C5A56 !important;
  line-height: 1.65 !important;
  margin-bottom: 7px !important;
}
.sf-ai-body-card p:last-child { margin-bottom: 0 !important; }
.sf-ai-body-card strong { color: #1A1917 !important; font-weight: 600 !important; }
.sf-ai-body-card ul,
.sf-ai-body-card ol,
.sf-ai-body-card li {
  font-size: 12px !important;
  color: #5C5A56 !important;
  line-height: 1.65 !important;
}

/* Hide action icons for AI summary */
.sf-note-entry.sf-note-ai .sf-note-actions { display: none !important; }

/* Hide body-wrap for AI (content is in header area) */
.sf-note-entry.sf-note-ai .sf-note-body-wrap { display: none !important; }

/* Second div in AI row — the metadata/refresh row */
.sf-ai-row > div:nth-child(2) {
  padding: 0 13px 2px !important;
  background: transparent !important;
}
.sf-ai-row > div:nth-child(2) > div:first-child {
  background: transparent !important;
}

/* ── F. Bottom Pagination ────────────────────── */
.sf-notes-bottom-pagination {
  padding: 8px 13px !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
}
.sf-notes-bottom-pagination > div {
  float: none !important;
  padding-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* ═══════════════════════════════════════════════════════════════
   RIGHT PANEL v2 — Enterprise Design (Tasks, Appointments, Groups)
   ═══════════════════════════════════════════════════════════════ */

/* ── G. Right Panel Cards ────────────────────── */
.sf-dv-right-panel .sf-rp-taskapp {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.13) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  flex: 1 !important;
}

/* ── H. Card Header ──────────────────────────── */
.sf-dv-right-panel .sf-rp-card-hdr {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 13px !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  margin-bottom: 0 !important;
  font-size: 10px !important;
  color: #A8A49C !important;
}
.sf-dv-right-panel .sf-rp-card-hdr span {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #A8A49C !important;
  width: auto !important;
}
.sf-dv-right-panel .sf-rp-card-hdr a {
  font-size: 12px !important;
  color: var(--primary-color, #2563EB) !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

/* ── I. Toolbar (Add + Filter) ───────────────── */
.sf-dv-right-panel .sf-rp-toolbar {
  padding: 6px 12px !important;
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
  gap: 6px !important;
}
.sf-dv-right-panel .sf-rp-toolbar .MuiButton-root {
  height: 26px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
  text-transform: none !important;
  padding: 0 10px !important;
  min-width: auto !important;
  border: 1px solid rgba(0,0,0,0.13) !important;
  color: #5C5A56 !important;
  background: #FFFFFF !important;
  font-weight: 500 !important;
  line-height: normal !important;
}
.sf-dv-right-panel .sf-rp-toolbar .MuiButton-root:hover {
  background: #ECEEF1 !important;
  color: #1A1917 !important;
}
.sf-dv-right-panel .sf-rp-toolbar .MuiButton-root .MuiButton-endIcon {
  margin-left: 2px !important;
}
.sf-dv-right-panel .sf-rp-toolbar .MuiButton-root .MuiButton-endIcon .MuiIcon-root {
  font-size: 14px !important;
}

/* ── J. Task / Appointment List ──────────────── */
.sf-dv-right-panel .sf-rp-list {
  line-height: normal !important;
  font-size: 12px !important;
}

/* Empty state — "Nothing pending" / "Nothing completed" */
.sf-dv-right-panel .sf-rp-empty-state {
  padding: 24px 12px !important;
  text-align: center !important;
  color: #A8A49C !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.sf-dv-right-panel .sf-rp-empty-state > div {
  width: auto !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* Individual item */
.sf-dv-right-panel .sf-rp-item {
  display: flex !important;
  flex-direction: column !important;
  padding: 9px 12px 12px !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  cursor: pointer !important;
  gap: 3px !important;
  position: static !important;
  border: none !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
}
.sf-dv-right-panel .sf-rp-item:first-child {
  border-top: none !important;
}
.sf-dv-right-panel .sf-rp-item:hover {
  background: #FAFBFC !important;
}

/* Row 1: date + more */
.sf-dv-right-panel .sf-rp-item-row1 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  line-height: normal !important;
  height: auto !important;
}
/* Kill clearfix pseudo-element inside flex row */
.sf-dv-right-panel .sf-rp-item-row1.clearfix::after {
  display: none !important;
}
.sf-dv-right-panel .sf-rp-item-row1 > div:first-child {
  float: none !important;
}
/* Date text — reset padding-left from base .dpvalue (17px for hidden icon) */
.sf-dv-right-panel .sf-rp-item-row1 .dpvalue {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  color: #A8A49C !important;
  white-space: nowrap !important;
  margin-top: 0 !important;
  line-height: normal !important;
  padding-left: 0 !important;
}
.sf-dv-right-panel .sf-rp-item-row1 .dpvalue span {
  font-size: 11px !important;
  color: #A8A49C !important;
}
/* Hide the clock/calendar FontAwesome icon before date */
.sf-dv-right-panel .sf-rp-item-row1 .dpvalue + i,
.sf-dv-right-panel .sf-rp-item-row1 > div:first-child > div > span:first-child {
  display: none !important;
}
/* Override color classes on date text */
.sf-dv-right-panel .sf-rp-item-row1 .dpvalue.rech_color_red,
.sf-dv-right-panel .sf-rp-item-row1 .dpvalue.rech_color_green,
.sf-dv-right-panel .sf-rp-item-row1 .dpvalue.rech_color_blue,
.sf-dv-right-panel .sf-rp-item-row1 .dpvalue.rech_color_orange {
  color: #A8A49C !important;
}
/* Type pill beside the date (Task / Appointment / Email / SMS) */
.sf-rp-type-pill {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  margin-left: 5px !important;
  white-space: nowrap !important;
  letter-spacing: 0.02em !important;
  vertical-align: middle !important;
}
.sf-rp-type-pill-task {
  background: #F3F4F6 !important;
  color: #6B7280 !important;
}
.sf-rp-type-pill-appointment {
  background: #F3F4F6 !important;
  color: #A8A49C !important;
}
.sf-rp-type-pill-email {
  background: #FEF3C7 !important;
  color: #B45309 !important;
}
.sf-rp-type-pill-sms {
  background: #F0FDF4 !important;
  color: #16A34A !important;
}

/* More button (3-dot) */
.sf-dv-right-panel .sf-rp-item-more {
  color: #A8A49C !important;
  flex-shrink: 0 !important;
}
.sf-dv-right-panel .sf-rp-item-more .MuiIcon-root {
  width: 18px !important;
  height: 18px !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  color: #A8A49C !important;
  cursor: pointer !important;
  margin-top: 0 !important;
  border: none !important;
}
.sf-dv-right-panel .sf-rp-item-more .MuiIcon-root:hover {
  background: #ECEEF1 !important;
  color: #1A1917 !important;
}

/* Item details wrapper — flex-wrap so status+contact share a row */
.sf-dv-right-panel .sf-rp-item-details {
  position: static !important;
  top: auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px 6px !important;
}

/* Item label (task/appointment name) — takes full row */
.sf-dv-right-panel .sf-rp-item-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #1A1917 !important;
  line-height: 1.35 !important;
  width: 100% !important;
  flex-basis: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.sf-dv-right-panel .sf-rp-item-label span {
  cursor: pointer !important;
}
.sf-dv-right-panel .sf-rp-item-label span:hover {
  color: var(--primary-color, #2563EB) !important;
}

/* Item status — pill badge */
.sf-dv-right-panel .sf-rp-item-status {
  line-height: normal !important;
  width: auto !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
}
.sf-dv-right-panel .sf-rp-item-status span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 1px 6px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
}
/* Remove dot before status text */
.sf-dv-right-panel .sf-rp-item-status span::before {
  display: none !important;
}
/* ── Status colors by date urgency ── */

/* Open / Upcoming — amber (future date) */
.sf-dv-right-panel .sf-rp-status-rdi-green span {
  background: #FEF3C7 !important;
  color: #B45309 !important;
}
/* Overdue — red (past date) */
.sf-dv-right-panel .sf-rp-status-rdi-red span {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
}
/* Due today — blue */
.sf-dv-right-panel .sf-rp-status-rdi-black span {
  background: #EEF3FF !important;
  color: #2563EB !important;
}

/* ── Status colors by record type ── */

/* Appointments confirmed/today — blue */
.sf-dv-right-panel .sf-rp-status-rdi-black.sf-rp-type-appointment span {
  background: #EEF3FF !important;
  color: #2563EB !important;
}
/* Appointments pending/future — amber */
.sf-dv-right-panel .sf-rp-status-rdi-green.sf-rp-type-appointment span {
  background: #FEF3C7 !important;
  color: #B45309 !important;
}
/* Appointments overdue/cancelled — red */
.sf-dv-right-panel .sf-rp-status-rdi-red.sf-rp-type-appointment span {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
}

/* ── Completed / Done filter — green (overrides date color) ── */
.sf-dv-right-panel .sf-rp-filter-done .sf-rp-item-status span {
  background: #F0FDF4 !important;
  color: #16A34A !important;
}

/* ── Fallback for undefined/null imageColor ── */
.sf-dv-right-panel .sf-rp-status-undefined span,
.sf-dv-right-panel .sf-rp-status-null span {
  background: #ECEEF1 !important;
  color: #5C5A56 !important;
}

/* ── Task/Appointment item dropdown menu ──────── */
.sf-rp-item-menu .MuiPaper-root {
  border: 1px solid rgba(0,0,0,0.13) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
  min-width: 150px !important;
  padding: 4px 0 !important;
}
.sf-rp-item-menu .MuiMenuItem-root {
  display: flex !important;
  align-items: center !important;
  padding: 7px 13px !important;
  font-size: 12px !important;
  color: #5C5A56 !important;
  min-height: unset !important;
  gap: 0 !important;
}
.sf-rp-item-menu .MuiMenuItem-root:hover {
  background: #ECEEF1 !important;
  color: #1A1917 !important;
}
.sf-rp-item-menu .MuiMenuItem-root span {
  color: inherit !important;
  font-size: inherit !important;
}
/* Danger item (Delete) */
.sf-rp-item-menu .MuiMenuItem-root.sf-rp-menu-danger {
  color: #DC2626 !important;
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  margin-top: 3px !important;
  padding-top: 10px !important;
}
.sf-rp-item-menu .MuiMenuItem-root.sf-rp-menu-danger:hover {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
}

/* Item contact / owner — sits next to status on same row */
.sf-dv-right-panel .sf-rp-item-contact {
  line-height: normal !important;
  width: auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}
.sf-dv-right-panel .sf-rp-item-contact span {
  font-size: 11px !important;
  color: #A8A49C !important;
}

/* ── K. Groups Card ──────────────────────────── */
.sf-dv-right-panel .sf-rp-groups {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.13) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
  margin-top: 0 !important;
}

/* Groups chips body */
.sf-dv-right-panel .sf-rp-groups-body {
  padding: 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

/* Override MUI Chip styling to match reference group-chip */
.sf-dv-right-panel .sf-rp-groups-body .groupChip.MuiChip-root {
  background: #ECEEF1 !important;
  border: 1px solid rgba(0,0,0,0.13) !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  color: #5C5A56 !important;
  height: 24px !important;
  padding: 0 4px !important;
  max-width: none !important;
  margin: 3px !important;
}
.sf-dv-right-panel .sf-rp-groups-body .groupChip .MuiChip-label {
  font-size: 11px !important;
  color: #5C5A56 !important;
  padding: 0 6px !important;
  line-height: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   WORKFLOW STEPPER v2 — Enterprise Design
   ═══════════════════════════════════════════════════════════════ */

/* Stepper wrapper — remove left margin, use full width */
.sf-stepper-wrap {
  margin-left: 0 !important;
  min-height: auto !important;
  margin-bottom: 14px !important;
}

/* Stepper card — white card with border/radius/shadow */
.sf-stepper-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.13) !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* Inner stepper container — horizontal scroll on hover only */
.sf-stepper-card .sf-stepper {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  padding-bottom: 0 !important;
  transition: padding-bottom 0.25s ease !important;
}
.sf-stepper-card .sf-stepper.sf-stepper-scrollable {
  overflow-x: auto !important;
  padding-bottom: 10px !important;
}
.sf-stepper-card .sf-stepper::-webkit-scrollbar {
  height: 5px;
}
.sf-stepper-card .sf-stepper::-webkit-scrollbar-thumb {
  background: #C5C8CE;
  border-radius: 4px;
}
.sf-stepper-card .sf-stepper::-webkit-scrollbar-thumb:hover {
  background: #A8ABB2;
}

/* MUI Stepper root — natural width, never squeeze */
.sf-stepper-card .MuiStepper-root {
  padding: 4px 0 !important;
  background: transparent !important;
  width: max-content !important;
  min-width: 100% !important;
}

/* Step root — tighten padding, never shrink */
.sf-stepper-card .MuiStep-root {
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* ── Step Icon (circle) — base ── */
.sf-stepper-card .MuiStepIcon-root {
  width: 22px !important;
  height: 22px !important;
  font-size: 22px !important;
}
.sf-stepper-card .MuiStepIcon-text {
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* ── Step Label text — base ── */
.sf-stepper-card .MuiStepLabel-label,
.sf-stepper-card .MuiStepLabel-label div,
.sf-stepper-card .MuiStepButton-root .MuiStepLabel-label,
.sf-stepper-card .MuiStepButton-root .MuiStepLabel-label div {
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* ── Done steps — green ── */
.sf-stepper-card .sf-step-done .MuiStepIcon-root {
  color: #16A34A !important;
}
.sf-stepper-card .sf-step-done .MuiStepLabel-label,
.sf-stepper-card .sf-step-done .MuiStepLabel-label div {
  color: #16A34A !important;
  font-weight: 500 !important;
}

/* ── Active step — accent with glow ring ── */
.sf-stepper-card .sf-step-active .MuiStepIcon-root {
  color: var(--primary-color, #2563EB) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #2563EB) 15%, #FFFFFF) !important;
}
.sf-stepper-card .sf-step-active .MuiStepLabel-label,
.sf-stepper-card .sf-step-active .MuiStepLabel-label div {
  color: var(--primary-color, #2563EB) !important;
  font-weight: 600 !important;
}

/* ── Pending steps — gray circle with border ── */
.sf-stepper-card .sf-step-pending .MuiStepIcon-root {
  color: #ECEEF1 !important;
  border: 1.5px solid rgba(0,0,0,0.13) !important;
  border-radius: 50% !important;
}
.sf-stepper-card .sf-step-pending .MuiStepIcon-root .MuiStepIcon-text {
  fill: #A8A49C !important;
}
.sf-stepper-card .sf-step-pending .MuiStepLabel-label,
.sf-stepper-card .sf-step-pending .MuiStepLabel-label div {
  color: #7c7a77 !important;
  font-weight: 400 !important;
}

/* ── Connectors (lines between steps) ── */
.sf-stepper-card .MuiStepConnector-root {
  flex-shrink: 0 !important;
  min-width: 24px !important;
}
.sf-stepper-card .MuiStepConnector-line {
  border-top-width: 1.5px !important;
}
/* Done connector — green */
.sf-stepper-card .sf-step-done + .MuiStepConnector-root .MuiStepConnector-line,
.sf-stepper-card .MuiStepConnector-root.Mui-completed .MuiStepConnector-line {
  border-color: #16A34A !important;
}
/* Active connector (line leading into active) — green */
.sf-stepper-card .MuiStepConnector-root.Mui-active .MuiStepConnector-line {
  border-color: #16A34A !important;
}
/* Pending connector — gray */
.sf-stepper-card .sf-step-pending + .MuiStepConnector-root .MuiStepConnector-line,
.sf-stepper-card .MuiStepConnector-root:not(.Mui-completed):not(.Mui-active) .MuiStepConnector-line {
  border-color: rgba(0,0,0,0.13) !important;
}

/* ── Step Button (clickable steps) — clean up ── */
.sf-stepper-card .MuiStepButton-root {
  padding: 0 !important;
  margin: 0 !important;
}
.sf-stepper-card .MuiStepButton-root:hover .MuiStepLabel-label div {
  text-decoration: underline !important;
}

/* ═══════════════════════════════════════════════════════════════
   DETAIL VIEW HEADER v2 — Match ObjectHeading / Accounts style
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper — same as .appheader: transparent, no shadow */
.headerDetailView {
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px 0 !important;
  width: 100% !important;
}
.headerDetailView > div {
  border-bottom: 0 !important;
}

/* Root — same as .headingApp: flex, center-aligned */
.sf-dv-header {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  width: 100% !important;
}

/* ── Left side: icon + title + refresh (same as .headingApp > div > div:first-child) ── */
.sf-dv-header > div:first-child {
  display: flex !important;
  align-items: center !important;
  float: none !important;
  flex: 0 0 45% !important;
  min-width: 0 !important;
}

/* Icon container — same as .headingApp i#instantColorChange: 38x38, accent bg, 10px radius */
.sf-dv-header > div:first-child > span:first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background-color: color-mix(in srgb, var(--primary-color, #2563EB) 10%, white) !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  margin: 0 5px 0 0 !important;
}
/* Icon glyph — same as headingApp icon */
.sf-dv-header > div:first-child > span:first-child > i {
  color: var(--primary-color, #2563EB) !important;
  font-size: 18px !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  position: static !important;
  top: auto !important;
  text-align: center !important;
  background: transparent !important;
  padding: 0 !important;
  line-height: 1 !important;
}
/* Uploaded image — fits inside the 38x38 container */
.sf-dv-header > div:first-child > span:first-child > img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
}

/* Title container — auto width so refresh icon stays adjacent (matches ObjectHeading inline-flex) */
.sf-dv-header #titlecontainer {
  max-width: 70% !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
}

/* Title text — same as .headingApp title: 20px, 600 weight, #1a1917 */
.sf-dv-header #titlecontainer > span,
.sf-dv-header #detailviewHeaderId {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  color: #1A1917 !important;
  padding-left: 0 !important;
  vertical-align: middle !important;
}

/* Refresh link — same as .sf-refresh-btn style */
.sf-dv-header > div:first-child > span:last-child {
  margin-top: 0 !important;
  padding-left: 6px !important;
  position: static !important;
  flex-shrink: 0 !important;
}
.sf-dv-header > div:first-child > span:last-child > span {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--primary-color, #2563EB) !important;
  cursor: pointer !important;
  background-color: transparent !important;
}
.sf-dv-header > div:first-child > span:last-child > span:hover {
  text-decoration: underline !important;
}

/* ── Right side: action buttons (same as .headingApp button row) ── */
.sf-dv-header > div[style*="flex-end"],
.sf-dv-header > div[style*="justify-content"] {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  float: none !important;
  width: auto !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* All action button inner wrappers — no float, flex */
.sf-dv-header > div[style*="flex-end"] > div,
.sf-dv-header > div[style*="justify-content"] > div {
  display: inline-flex !important;
  float: none !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
}

/* All MUI Buttons inside — same as .abtn1 style: 8px radius, 13px font, no uppercase */
.sf-dv-header .MuiButton-root {
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  height: auto !important;
  line-height: normal !important;
  min-width: auto !important;
}
.sf-dv-header .MuiButton-root:hover {
  filter: brightness(0.92) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22) !important;
}

/* More button (3-dot PopOver) — same as ObjectHeading more button */
.sf-dv-header .c-popOverButton {
  width: 30px !important;
  height: 30px !important;
  border-radius: 7px !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,0.13) !important;
  color: #A8A49C !important;
  padding: 0 !important;
  min-width: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.sf-dv-header .c-popOverButton:hover {
  background: #ECEEF1 !important;
  color: #1A1917 !important;
}

/* ── Button startIcon SVG alignment ── */
.sf-dv-header .MuiButton-startIcon {
  margin-right: 4px !important;
  margin-left: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.sf-dv-header .MuiButton-startIcon svg {
  flex-shrink: 0 !important;
}

/* ── More menu — icon + label alignment ── */
.c-popOverButton .MuiMenuItem-root > div {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}
/* Only style non-empty icon spans (has SVG child) — avoids breaking menus without icons */
.c-popOverButton .MuiMenuItem-root > div > span:first-child:not(:empty) {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-right: 8px !important;
}
/* Override inline marginLeft when icon is present — gap comes from icon margin-right */
.c-popOverButton .MuiMenuItem-root > div > span:first-child:not(:empty) + span {
  margin-left: 0 !important;
}

/* ── Danger menu item (Delete) ── */
.c-popOverButton .MuiMenuItem-root.sf-menu-danger,
.c-popOverButton .MuiMenuItem-root.sf-menu-danger span {
  color: #DC2626 !important;
}
.c-popOverButton .MuiMenuItem-root.sf-menu-danger:hover {
  background: #FEF2F2 !important;
  color: #DC2626 !important;
}

/* Divider before danger item */
.c-popOverButton .MuiMenuItem-root.sf-menu-danger {
  border-top: 1px solid rgba(0,0,0,0.08) !important;
  margin-top: 3px !important;
  padding-top: 10px !important;
}

/* Hide clearfix */
.sf-dv-header > .clearfix {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   SETTINGS MODAL v1 — Enterprise Design (reusable)
   Applied via PaperProps className="sf-settings-modal"
   on MUI Dialog. Matches calendar_tasks reference HTML.
   ═══════════════════════════════════════════════════════════ */

/* ── A. Dialog Paper ───────────────────────── */
.sf-settings-modal.MuiPaper-root {
  background: #F8F9FB !important;
  border-radius: 12px !important;
  max-height: 88vh !important;
  overflow: hidden !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.18) !important;
  animation: sfSmIn 0.2s ease !important;
}
@keyframes sfSmIn {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ── B. Dark Header ────────────────────────── */
.sf-settings-modal .MuiDialogTitle-root {
  background: var(--module-color, #374151) !important;
  padding: 0 20px !important;
  height: 52px !important;
  min-height: 52px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 12px 12px 0 0 !important;
  flex-shrink: 0 !important;
}
.sf-settings-modal .sf-dialog-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}
.sf-settings-modal .sf-dialog-title > div:first-child {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  margin-left: 0 !important;
}
.sf-settings-modal .sf-dialog-title .pull-right .MuiIconButton-root {
  color: rgba(255,255,255,0.7) !important;
}
.sf-settings-modal .sf-dialog-title .pull-right .MuiIconButton-root:hover {
  background: rgba(255,255,255,0.15) !important;
  color: #FFFFFF !important;
}

/* ── C. Scrollable Body ────────────────────── */
.sf-settings-modal .MuiDialogContent-root {
  padding: 20px !important;
  background: #F8F9FB !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
}
.sf-settings-modal .MuiDialogContent-root::-webkit-scrollbar {
  width: 3px;
}
.sf-settings-modal .MuiDialogContent-root::-webkit-scrollbar-thumb {
  background: #DDE0E5;
  border-radius: 3px;
}

/* ── D. Footer (DialogActions) ─────────────── */
.sf-settings-modal .MuiDialogActions-root {
  display: none !important;
}

/* Component-level footer */
.sf-sm-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 14px 0 0 !important;
  margin-top: auto !important;
  border-top: 1px solid #DDE0E5 !important;
}
.sf-sm-footer .sf-sm-btn-save {
  height: 34px !important;
  padding: 0 20px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
  background: var(--primary-color, #2563EB) !important;
  color: #FFFFFF !important;
  text-transform: none !important;
  min-width: auto !important;
}
.sf-sm-footer .sf-sm-btn-save:hover {
  background: color-mix(in srgb, var(--primary-color, #2563EB) 85%, #000) !important;
}
.sf-sm-footer .sf-sm-btn-cancel {
  height: 34px !important;
  padding: 0 16px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1px solid #DDE0E5 !important;
  background: #FFFFFF !important;
  color: #706D65 !important;
  text-transform: none !important;
  min-width: auto !important;
}
.sf-sm-footer .sf-sm-btn-cancel:hover {
  background: #ECEEF1 !important;
}

/* ── E. Section Headers ────────────────────── */
.sf-sm-section {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #A8A49C !important;
  margin: 0 0 12px !important;
}

/* ── F. Working Hours Row ──────────────────── */
.sf-sm-wh-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.sf-sm-wh-row .MuiFormControl-root {
  min-width: 100px !important;
}
.sf-sm-wh-row .MuiOutlinedInput-root {
  height: 38px !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  font-size: 13px !important;
}
.sf-sm-wh-row .MuiOutlinedInput-notchedOutline {
  border: 1.5px solid #DDE0E5 !important;
}
.sf-sm-wh-row .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #A8A49C !important;
}
.sf-sm-wh-row .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--primary-color, #2563EB) !important;
}
.sf-sm-wh-to {
  font-size: 13px !important;
  color: #706D65 !important;
  font-weight: 500 !important;
  flex-shrink: 0 !important;
}
.sf-sm-wh-tz {
  font-size: 13px !important;
  color: #1A1917 !important;
  font-weight: 500 !important;
}

/* ── G. Fieldset/Legend Select Fields ──────── */
.sf-sm-fl {
  position: relative !important;
  border: 1.5px solid #DDE0E5 !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  margin-bottom: 14px !important;
  padding: 0 !important;
}
.sf-sm-fl .MuiOutlinedInput-root {
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  font-size: 13px !important;
}
.sf-sm-fl .MuiOutlinedInput-notchedOutline {
  border: none !important;
}
.sf-sm-fl .MuiInputLabel-root {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #A8A49C !important;
  letter-spacing: 0.04em !important;
  background: #FFFFFF !important;
  padding: 0 4px !important;
  transform: translate(10px, -8px) !important;
}
.sf-sm-fl .MuiInputLabel-root.Mui-focused {
  color: #A8A49C !important;
}

/* ── H. Plain Inputs & Textareas ───────────── */
.sf-sm-input .MuiOutlinedInput-root {
  border-radius: 8px !important;
  background: #FFFFFF !important;
  font-size: 13px !important;
}
.sf-sm-input .MuiOutlinedInput-notchedOutline {
  border: 1.5px solid #DDE0E5 !important;
}
.sf-sm-input .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #A8A49C !important;
}
.sf-sm-input .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--primary-color, #2563EB) !important;
}
.sf-sm-input .MuiInputLabel-root {
  font-size: 13px !important;
  color: #A8A49C !important;
}
.sf-sm-input {
  margin-bottom: 14px !important;
}

/* ── I. Display Checkbox List ──────────────── */
.sf-sm-disp-list {
  background: #FFFFFF !important;
  border: 1.5px solid #DDE0E5 !important;
  border-radius: 8px !important;
  padding: 0 12px !important;
  margin-bottom: 8px !important;
}
.sf-sm-disp-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 0 !important;
  border-bottom: 1px solid #E8EAED !important;
}
.sf-sm-disp-row:last-child {
  border-bottom: none !important;
}
.sf-sm-disp-row .MuiCheckbox-root {
  padding: 0 !important;
  color: #DDE0E5 !important;
}
.sf-sm-disp-row .MuiCheckbox-root.Mui-checked {
  color: var(--primary-color, #2563EB) !important;
}
.sf-sm-disp-row .sf-sm-disp-label {
  font-size: 13px !important;
  color: #1A1917 !important;
}

/* ── J. SuperSelect Overrides Inside Settings ── */
.sf-settings-modal .MuiDialogContent-root .sf-sm-super-select {
  margin-bottom: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════
   CALL & TEXT PANELS v2 — Enterprise Design
   Scoped under .sf-ct-* to avoid leaking into other views.
   ═══════════════════════════════════════════════════════════════ */

/* ── Panel Body ── */
.sf-ct-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  background: #FFFFFF;
}
.sf-ct-panel-body::-webkit-scrollbar { width: 4px; }
.sf-ct-panel-body::-webkit-scrollbar-thumb { background: #DDE0E5; border-radius: 4px; }

/* ── Contact Row ── */
.sf-ct-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: none;
}
.sf-ct-contact-av {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, #60A5FA, #2563EB);
  flex-shrink: 0;
}
.sf-ct-contact-info h3 { font-size: 15px; font-weight: 600; color: #1A1917; margin: 0; line-height: 1.3; }
.sf-ct-contact-info p { font-size: 12px; color: #A8A49C; margin: 2px 0 0; }

/* ── Form Elements ── */
.sf-ct-f-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #A8A49C; display: block; margin-bottom: 4px; }
.sf-ct-f-row { display: flex; gap: 10px; margin-bottom: 14px; }
.sf-ct-f-col { flex: 1; min-width: 0; }
.sf-ct-f-select {
  width: 100%; height: 36px; border: 1px solid #DDE0E5; border-radius: 7px; padding: 0 28px 0 10px;
  font-size: 13px; font-family: inherit; background: #FFFFFF; color: #1A1917;
  appearance: none; -webkit-appearance: none; cursor: pointer; outline: none; box-sizing: border-box;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23A8A49C' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.sf-ct-f-select:focus { border-color: var(--primary-color, #2563EB); }
.sf-ct-f-autocomplete .MuiFormControl-root { margin-top: 0 !important; }
.sf-ct-f-autocomplete .MuiOutlinedInput-root { height: 36px !important; border-radius: 7px !important; font-size: 13px !important; padding-right: 56px !important; padding-left: 0 !important; }
.sf-ct-f-autocomplete .MuiOutlinedInput-input { padding: 0 0 0 10px !important; font-size: 13px !important; height: 36px !important; box-sizing: border-box !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.sf-ct-f-autocomplete .MuiAutocomplete-endAdornment { right: 2px !important; top: 50% !important; transform: translateY(-50%) !important; }
.sf-ct-f-autocomplete .MuiOutlinedInput-notchedOutline { border-color: #DDE0E5 !important; border-width: 1px !important; }
.sf-ct-f-autocomplete .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--primary-color, #2563EB) !important; border-width: 1px !important; }
.sf-ct-f-input { width: 100%; height: 36px; border: 1px solid #DDE0E5; border-radius: 7px; padding: 0 10px; font-size: 13px; font-family: inherit; background: #ECEEF1; color: #1A1917; outline: none; box-sizing: border-box; }
.sf-ct-f-input:focus { border-color: var(--primary-color, #2563EB); background: #FFFFFF; }
.sf-ct-f-textarea { width: 100%; min-height: 110px; border: 1px solid #DDE0E5; border-radius: 7px; padding: 10px; font-size: 13px; font-family: inherit; color: #1A1917; resize: vertical; outline: none; box-sizing: border-box; }
.sf-ct-f-textarea:focus { border-color: var(--primary-color, #2563EB); }
.sf-ct-f-textarea::placeholder { color: #A8A49C; }

/* ── Record Call Row ── */
.sf-ct-record-row { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.sf-ct-rec-cb { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #DDE0E5; cursor: pointer; appearance: none; -webkit-appearance: none; background: #FFFFFF; flex-shrink: 0; }
.sf-ct-rec-cb:checked {
  background: var(--primary-color, #2563EB); border-color: var(--primary-color, #2563EB);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='white' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.sf-ct-rec-label { font-size: 13px; color: #706D65; cursor: pointer; }
.sf-ct-info-badge { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid #A8A49C; display: inline-flex; align-items: center; justify-content: center; color: #A8A49C; font-size: 10px; font-style: italic; cursor: pointer; flex-shrink: 0; }
.sf-ct-info-badge:hover { border-color: var(--primary-color, #2563EB); color: var(--primary-color, #2563EB); }

/* ── Phone Number Rows ── */
.sf-ct-pn-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sf-ct-pn-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #A8A49C; width: 48px; flex-shrink: 0; }
.sf-ct-call-btn-green { height: 36px; padding: 0 14px; border-radius: 7px; background: #16A34A; color: white; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; display: flex; align-items: center; gap: 5px; white-space: nowrap; flex-shrink: 0; }
.sf-ct-call-btn-green:hover { background: #15803D; }
.sf-ct-call-btn-green:disabled { opacity: 0.5; cursor: not-allowed; }
.sf-ct-call-btn-red { height: 36px; padding: 0 14px; border-radius: 7px; background: #DC2626; color: white; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; display: flex; align-items: center; gap: 5px; white-space: nowrap; flex-shrink: 0; }
.sf-ct-call-btn-red:hover { background: #B91C1C; }

/* ── Dialpad ── */
.sf-ct-dialpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.sf-ct-dial-key { height: 50px; border-radius: 10px; background: #ECEEF1; border: 1px solid #DDE0E5; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: background 0.1s; user-select: none; }
.sf-ct-dial-key:hover { background: #E2E4E8; }
.sf-ct-dial-key:active { background: #D0D2D8; }
.sf-ct-dk-num { font-size: 17px; font-weight: 600; line-height: 1; color: #1A1917; }
.sf-ct-dk-sub { font-size: 9px; font-weight: 500; color: #A8A49C; letter-spacing: 0.08em; margin-top: 1px; text-transform: uppercase; }

/* ── Compose (chat-style, pinned bottom) ── */
.sf-ct-compose { border-top: 1px solid #DDE0E5; padding: 10px 12px; flex-shrink: 0; background: #FFFFFF; }
.sf-ct-compose-attachments { margin-bottom: 6px; }
.sf-ct-compose-row { display: flex; gap: 8px; align-items: flex-end; position: relative; }
.sf-ct-compose-input-wrap { flex: 1; border: 1px solid #DDE0E5; border-radius: 10px; background: #ECEEF1; overflow: hidden; }
.sf-ct-compose-textarea { width: 100%; border: none; background: transparent; padding: 9px 12px; font-size: 13px; font-family: inherit; resize: none; outline: none; min-height: 80px; max-height: 110px; overflow-y: auto; display: block; color: #1A1917; box-sizing: border-box; }
.sf-ct-compose-textarea::placeholder { color: #A8A49C; }
.sf-ct-compose-input-footer { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px 6px; }
.sf-ct-msg-char { font-size: 11px; color: #A8A49C; }
.sf-ct-attach-btn { width: 24px; height: 24px; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: #A8A49C; cursor: pointer; border: none; background: none; padding: 0; }
.sf-ct-attach-btn:hover { background: #E8EAED; color: #706D65; }
/* ── Send Split Button ── */
.sf-ct-send-split { display: flex; align-items: stretch; flex-shrink: 0; align-self: flex-end; margin-bottom: 2px; }
.sf-ct-send-btn { display: flex; align-items: center; gap: 5px; padding: 7px 16px; border-radius: 6px; background: var(--primary-color, #2563EB); color: white; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; border: none; white-space: nowrap; }
.sf-ct-send-split .sf-ct-send-btn:not(:last-child) { border-radius: 6px 0 0 6px; }
.sf-ct-send-btn:hover { background: color-mix(in srgb, var(--primary-color, #2563EB) 85%, black); }
.sf-ct-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sf-ct-send-drop { display: flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: 0 6px 6px 0; background: var(--primary-color, #2563EB); color: white; cursor: pointer; border: none; border-left: 1px solid rgba(255,255,255,0.3); }
.sf-ct-send-drop:hover { background: color-mix(in srgb, var(--primary-color, #2563EB) 85%, black); }
.sf-ct-send-split:hover .sf-ct-send-btn,
.sf-ct-send-split:hover .sf-ct-send-drop { background: color-mix(in srgb, var(--primary-color, #2563EB) 85%, black); }
.sf-ct-send-drop:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Chat Thread (scrollable middle) ── */
.sf-ct-chat-thread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.sf-ct-chat-thread::-webkit-scrollbar { width: 4px; }
.sf-ct-chat-thread::-webkit-scrollbar-thumb { background: #DDE0E5; border-radius: 4px; }

/* ── "Previous messages" divider ── */
.sf-ct-chat-divider { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.sf-ct-chat-divider-line { flex: 1; height: 1px; background: #E8EAED; }
.sf-ct-chat-divider-text { font-size: 11px; color: #A8A49C; white-space: nowrap; }

/* ── Chat bubble rows ── */
.sf-ct-chat-row { display: flex; flex-direction: column; gap: 2px; }
.sf-ct-chat-row-right { align-items: flex-end; }
.sf-ct-chat-row-left { align-items: flex-start; }

/* ── Chat bubbles ── */
.sf-ct-chat-bubble { max-width: 80%; padding: 9px 13px; font-size: 13px; line-height: 1.5; display: inline-flex; align-items: flex-end; gap: 4px; word-wrap: break-word; overflow-wrap: break-word; }
.sf-ct-chat-sent { background: var(--primary-color, #2563EB); color: #FFFFFF; border-radius: 14px 14px 4px 14px; }
.sf-ct-chat-received { background: #ECEEF1; color: #1A1917; border-radius: 14px 14px 14px 4px; }
.sf-ct-chat-text { white-space: pre-wrap; }

/* ── Chat meta (name + time) ── */
.sf-ct-chat-meta { display: flex; gap: 6px; font-size: 10px; color: #A8A49C; padding: 0 4px; }


/* ── Attachment Items ── */
.sf-ct-att-item { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: #ECEEF1; border: 1px solid #DDE0E5; border-radius: 7px; font-size: 12px; color: #706D65; margin-bottom: 4px; }
.sf-ct-att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.sf-ct-att-rm { width: 18px; height: 18px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #A8A49C; cursor: pointer; border: none; background: none; padding: 0; flex-shrink: 0; margin-left: 6px; }
.sf-ct-att-rm:hover { background: #FFF5F5; color: #DC2626; }

/* ── Panel header close/minimize button ── */
.sf-ct-ph-btn { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.65); cursor: pointer; border: none; background: transparent; padding: 0; }
.sf-ct-ph-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }

/* ── Call Drawer Overrides ── */
.sf-call-drawer-body.sf-ct-panel-body { background: #FFFFFF !important; padding: 20px !important; overflow-y: auto !important; flex: 1 !important; min-height: 0 !important; }

/* ── SMS Top section (contact + form, fixed at top) ── */
.sf-ct-sms-top { padding: 14px 16px 0; flex-shrink: 0; border-bottom: 1px solid #E8EAED; }

/* ── Post-call action buttons ── */
.sf-ct-actions-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.sf-ct-btn-primary { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; border: none; background: var(--primary-color, #2563EB); color: white; }
.sf-ct-btn-primary:hover { filter: brightness(0.9); }
.sf-ct-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.sf-ct-btn-ghost { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; background: #FFFFFF; color: #706D65; border: 1px solid #DDE0E5; }
.sf-ct-btn-ghost:hover { background: #ECEEF1; }

/* ── sendSMS wrapper (flex column fills drawer body) ── */
.sf-ct-sms-wrapper {
  padding: 0;
  background: #FFFFFF;
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   SEND EMAIL v2 — Enterprise Design
   ═══════════════════════════════════════════════════════════════ */
.sf-em-dialog-paper.MuiPaper-root { width:96vw!important;height:95vh!important;max-width:96vw!important;max-height:95vh!important;border-radius:12px!important;margin:0!important;overflow:hidden!important }
.sf-em-dialog-paper .MuiDialogContent-root { padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;flex:1!important;min-height:0!important }
.sf-call-drawer:has(.sf-em-wrapper) { background:#fff!important }
.sf-call-drawer-body:has(.sf-em-wrapper) { display:flex!important;flex-direction:column!important;overflow:hidden!important;background:#fff!important;height:100%!important;padding:0!important }
.sf-em-wrapper { display:flex;flex-direction:column;height:100%;flex:1 1 0%;min-height:0;overflow:hidden;background:#fff }
.sf-em-header { display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:46px;background:var(--module-color, #374151);flex-shrink:0 }
.sf-em-header-title { font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 }
.sf-em-header-actions { display:flex;align-items:center;gap:6px;flex-shrink:0 }
.sf-em-header-btn { width:22px;height:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.25);border-radius:5px;transition:background .15s,color .15s }
.sf-em-header-btn:hover { background:rgba(255,255,255,.15);color:#fff }
.sf-em-header-close { background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.3);color:#fff }
.sf-em-action-bar { display:flex;align-items:center;justify-content:space-between;padding:7px 14px;border-bottom:1px solid rgba(0,0,0,.08);background:#ECEEF1;flex-shrink:0;gap:8px;flex-wrap:wrap }
.sf-em-action-right { display:flex;align-items:center;gap:6px;flex-wrap:wrap }
.sf-em-sending-text { color:#5C5A56;font-weight:700;font-size:12px;white-space:nowrap }
.MuiFormControlLabel-root { margin-left: 0 !important; }
.sf-em-action-bar .MuiFormControlLabel-root { margin:0!important }
.sf-em-action-bar .MuiFormControlLabel-label { font-size:12px!important;color:#5C5A56!important;user-select:none }
.sf-em-action-bar .MuiSwitch-root { width:42px!important;height:26px!important;padding:4px!important }
.sf-em-action-bar .MuiSwitch-switchBase { padding:6px!important }
.sf-em-action-bar .MuiSwitch-switchBase.Mui-checked { color:#fff!important;transform:translateX(16px)!important }
.sf-em-action-bar .MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track { background-color:var(--primary-color,#2563EB)!important;opacity:1!important }
.sf-em-action-bar .MuiSwitch-track { border-radius:13px!important;background-color:#B0B0B0!important }
.sf-em-action-bar .MuiSwitch-thumb { width:14px!important;height:14px!important;box-shadow:0 1px 3px rgba(0,0,0,.2)!important }
.sf-em-action-right>div>div[name] { border:1px solid rgba(0,0,0,.13)!important;background:#fff!important;border-radius:6px!important;padding:4px 10px!important;font-size:12px!important;color:#5C5A56!important;cursor:pointer;height:auto!important;min-height:28px!important;display:inline-flex!important;align-items:center!important;white-space:nowrap }
.sf-em-action-right>div>div[name]:hover { background:#F1F2F4!important }
.sf-em-action-right>div>div[name] label { display:none!important }
.sf-em-action-right>div>div[name] span { font-size:12px!important;color:#5C5A56!important;font-weight:500!important;height:auto!important;line-height:1.3!important;padding:0!important;display:inline-flex!important;align-items:center!important;gap:4px!important }
.sf-em-action-right>div>div[name] span>div:last-child { display:inline-flex!important;align-items:center!important;padding:0!important;margin:0!important }
.sf-em-action-right>div>div[name] #sf-popOver-select-label { font-size:12px!important;color:#5C5A56!important }
.sf-em-action-right>div>div[name] .fas.fa-sort-down { font-size:9px!important;line-height:1!important;vertical-align:middle!important;display:inline-flex!important;align-items:center!important;margin-top:-3px!important }
.sf-em-body { flex:1 1 0%;overflow-y:auto;overflow-x:hidden;min-height:0 }
.sf-em-field-row { display:flex;align-items:center;border-bottom:1px solid rgba(0,0,0,.08);padding:0 14px;min-height:40px;gap:10px;flex-shrink:0 }
.sf-em-field-label { font-size:11px;color:#A8A49C;width:52px;flex-shrink:0;font-weight:500 }
.sf-em-field-value { flex:1;display:flex;align-items:center;gap:5px;min-width:0 }
.sf-em-field-value>div { width:100% }
.sf-em-field-value>div>div[name] { border:none!important;background:transparent!important;padding:0!important;height:auto!important;min-height:auto!important }
.sf-em-field-value>div>div[name] label { display:none!important }
.sf-em-field-value>div>div[name] span,.sf-em-field-value>div>div[name] #sf-popOver-select-label { font-size:14px!important;color:#1A1917!important;padding:0!important;height:auto!important;line-height:1.3!important }
.sf-em-field-value>div>div[name] .fas.fa-sort-down { font-size:10px!important }
.sf-em-template-select { position:relative;flex-shrink:0;width:300px }
.sf-em-template-select .MuiFormControl-root { margin:0!important }
.sf-em-template-select .MuiAutocomplete-root { padding:0!important }
.sf-em-template-select .MuiOutlinedInput-root { font-size:12px!important;border-radius:6px!important;background:#ECEEF1!important;padding:0 9px!important;height:28px!important;min-height:28px!important }
.sf-em-template-select .MuiOutlinedInput-root .MuiAutocomplete-input { padding:0!important;font-size:12px!important;height:28px!important }
.sf-em-template-select .MuiOutlinedInput-notchedOutline { border-color:rgba(0,0,0,.13)!important }
.sf-em-template-select .MuiInputLabel-root { display:none!important }
.sf-em-template-select .MuiAutocomplete-endAdornment { top:50%!important;transform:translateY(-50%)!important }
.sf-em-template-select .MuiAutocomplete-endAdornment .MuiSvgIcon-root { font-size:16px!important;color:#5C5A56!important }
.sf-em-field-value .MuiFormControl-root { margin:0!important }
.sf-em-field-value .MuiOutlinedInput-root { border:none!important;background:transparent!important;padding:0!important }
.sf-em-field-value .MuiOutlinedInput-notchedOutline { border:none!important }
.sf-em-field-value .MuiOutlinedInput-input { font-size:12px!important;padding:4px 0!important }
.sf-em-field-value .MuiInputLabel-root { display:none!important }
.sf-em-field-row .MuiFormControl-root { margin:0!important }
.sf-em-field-row .react-tags { border:none!important;background:transparent!important;padding:2px 0!important;min-height:auto!important;flex:1 }
.sf-em-field-row .react-tags__search-input input { font-size:12px!important;font-family:inherit!important }
.sf-em-field-row .react-tags__selected-tag { font-size:11px!important;border-radius:4px!important;padding:2px 6px!important;background:#ECEEF1!important;border:1px solid rgba(0,0,0,.13)!important }
.sf-em-field-value .sf-tag-autocomplete__root>div { border:none!important;margin-bottom:0!important;background:transparent!important;border-radius:0!important;padding:2px 0!important }
.sf-em-field-value .sf-tag-autocomplete__root>div>label { display:none!important }
.sf-em-field-value .sf-tag-autocomplete__root .MuiChip-root { font-size:11px!important;height:22px!important;border-radius:4px!important;background:#EEF3FF!important;color:var(--primary-color,#2563EB)!important;border:1px solid #BFCFFF!important }
.sf-em-field-value .sf-tag-autocomplete__root .MuiChip-root .MuiChip-label { padding:0 4px!important;font-weight:500!important }
.sf-em-field-value .sf-tag-autocomplete__root .MuiChip-deleteIcon { font-size:14px!important;color:var(--primary-color,#2563EB)!important;margin:0 2px 0 -2px!important }
.sf-em-field-value .sf-tag-autocomplete__inputfield { font-size:12px!important;font-family:inherit!important }
.sf-em-field-value .fa-eraser,.sf-em-field-value .fa-solid.fa-eraser { display:none!important }
.sf-em-cc-bcc-toggles { display:flex;align-items:center;gap:8px;flex-shrink:0 }
.sf-em-cc-bcc-link { font-size:12px;color:var(--primary-color,#2563EB);cursor:pointer;font-weight:500 }
.sf-em-cc-bcc-link:hover { text-decoration:underline }
.sf-em-cc-bcc-sep { color:#A8A49C;font-size:12px }
.sf-em-field-actions { display:flex;align-items:center;gap:4px;flex-shrink:0 }
.sf-em-icon-action-btn { width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer;color:#A8A49C;border:1px solid rgba(0,0,0,.13);background:#ECEEF1;flex-shrink:0;transition:background .15s,color .15s }
.sf-em-icon-action-btn:hover { background:#fff;color:#5C5A56 }
.sf-em-subject-input { flex:1;border:none;outline:none;font-size:13px;font-family:inherit;color:#1A1917;background:transparent;min-width:0 }
.sf-em-subject-input::placeholder { color:#A8A49C }
.sf-em-signers { padding:8px 14px;border-bottom:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;gap:8px }
.sf-em-signers .MuiFormControl-root { margin:0!important }
.sf-em-signers .MuiOutlinedInput-root { font-size:12px!important }
.sf-em-editor-area { flex-shrink:0 }
.sf-em-editor-loader { display:flex;align-items:center;justify-content:center;padding:40px }
.sf-em-editor-area .fr-toolbar { border-top:none!important;border-left:none!important;border-right:none!important;border-bottom:1px solid rgba(0,0,0,.08)!important;background:#ECEEF1!important;border-radius:0!important }
.sf-em-editor-area .fr-wrapper { border:none!important }
.sf-em-editor-area .fr-second-toolbar { display:none!important }
.sf-em-editor-area #bee-plugin-container { min-height:400px }
.sf-em-attachments { padding:0 14px;flex-shrink:0 }
.sf-em-attachments ul { padding-inline-start:0;margin-block-start:0;margin-block-end:0;list-style:none }
.sf-em-attach-file-item { display:flex;align-items:center;gap:6px;padding:5px 0;border-top:1px solid rgba(0,0,0,.06) }
.sf-em-file-icon { width:20px;height:20px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;color:#fff;flex-shrink:0;text-transform:uppercase }
.sf-em-attach-file-name { font-size:11px;color:#5C5A56;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0 }
.sf-em-attach-file-remove { cursor:pointer;color:#A8A49C;font-size:10px;flex-shrink:0;padding:2px }
.sf-em-attach-file-remove:hover { color:#DC2626 }
.sf-em-footer { display:flex;align-items:center;justify-content:space-between;padding:8px 14px;border-top:1px solid rgba(0,0,0,.08);background:#ECEEF1;flex-shrink:0 }
.sf-em-attach-wrap { display:flex;align-items:center }
.sf-em-attach-link { display:flex;align-items:center;gap:5px;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .15s;color:var(--primary-color,#2563EB) }
.sf-em-attach-link:hover { background:rgba(0,0,0,.04) }
.sf-em-attach-link span { font-size:12px;color:var(--primary-color,#2563EB);font-weight:500 }
.sf-em-footer-actions { display:flex;align-items:center;gap:6px }
.sf-em-send-split { display:flex;border-radius:6px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.15) }
.sf-em-send-main { padding:6px 18px;font-size:12px;font-weight:700;background:var(--primary-color,#2563EB);color:#fff;border:none;cursor:pointer;font-family:inherit;letter-spacing:.04em;border-right:1px solid rgba(255,255,255,.25);user-select:none;white-space:nowrap }
.sf-em-send-main:hover { filter:brightness(.92) }
.sf-em-send-caret { padding:6px 9px;background:var(--primary-color,#2563EB);color:#fff;border:none;cursor:pointer;display:flex;align-items:center }
.sf-em-send-caret:hover { filter:brightness(.92) }
.sf-em-next-btn.MuiButton-root { padding:6px 18px!important;font-size:12px!important;font-weight:700!important;background:var(--primary-color,#2563EB)!important;color:#fff!important;border-radius:6px!important;text-transform:uppercase!important;letter-spacing:.04em!important;box-shadow:0 1px 3px rgba(0,0,0,.15)!important;height:auto!important }
.sf-em-cancel-btn.MuiButton-root { padding:5px 13px!important;font-size:12px!important;font-weight:500!important;background:#fff!important;color:#5C5A56!important;border:1px solid rgba(0,0,0,.13)!important;border-radius:6px!important;text-transform:uppercase!important;height:auto!important;line-height:1.4!important;min-width:auto!important;box-shadow:none!important }
.sf-em-cancel-btn.MuiButton-root:hover { background:#ECEEF1!important }
.sf-em-attach-menu-item.MuiMenuItem-root { display:flex!important;align-items:center!important;gap:8px!important;font-size:12px!important;padding:8px 14px!important;color:#1A1917!important }
.sf-em-attach-menu-item.MuiMenuItem-root:hover { background:#F1F2F4!important }
.sf-em-send-menu.MuiPaper-root { border-radius:8px!important;border:1px solid rgba(0,0,0,.13)!important;box-shadow:0 4px 18px rgba(0,0,0,.15)!important;min-width:160px!important;padding:4px 0!important }
.sf-em-send-menu .MuiList-root { padding:0!important }
.sf-em-send-menu-item.MuiMenuItem-root { display:flex!important;align-items:center!important;gap:8px!important;font-size:12px!important;font-weight:400!important;padding:7px 13px!important;color:#5C5A56!important;min-height:auto!important }
.sf-em-send-menu-item.MuiMenuItem-root:hover { background:#ECEEF1!important;color:#1A1917!important }

.gdv-snav-item:hover { background:#ECEEF1!important;color:#1A1917!important }
.gdv-uis-hdr:hover { background:#F9FAFB!important }
.gdv-usedin-row:hover { background:#F9FAFB!important }

/* IMPORT SCREEN */
@keyframes imSpin { to { transform: rotate(360deg); } }
@keyframes imProgress { 0% { width: 0%; } 60% { width: 75%; } 90% { width: 92%; } 100% { width: 98%; } }

.imp-upload-icon { width: 38px; height: 38px; border-radius: 8px; border: 1px solid #DDE0E5; background: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; color: #A8A49C; box-shadow: 0 1px 3px rgba(0,0,0,.06); }

.imp-upload-title { font-size: 13px; color: #1A1917; font-weight: 600; margin-bottom: 2px; }
.imp-upload-sub { font-size: 11px; color: #A8A49C; }
.imp-upload-hint { font-size: 11px; color: #A8A49C; display: flex; align-items: center; gap: 4px; justify-content: center; margin-top: 7px; }

.imp-hidden { display: none; }

.imp-file-pill { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 10px; background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 7px; }
.imp-file-pill-name { flex: 1; font-size: 12.5px; font-weight: 500; color: #1A1917; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-file-pill-size { font-size: 11px; color: #B0B0B0; white-space: nowrap; flex-shrink: 0; }
.imp-file-remove { width: 24px; height: 24px; border-radius: 4px; border: none; background: transparent; cursor: pointer; color: #A8A49C; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }


.imp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.imp-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.imp-label { font-size: 11px; font-weight: 500; color: #706D65; letter-spacing: 0.03em; text-transform: uppercase; display: block; margin-bottom: 2px; }
.imp-full-width { width: 100%; }


.imp-add-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.imp-add-row .MuiButton-root.imp-btn-primary { height: 32px; padding-top: 0; padding-bottom: 0; }
.imp-text-flex { flex: 1; }
.imp-text-field .MuiOutlinedInput-root { height: 32px; font-size: 12.5px; }
.imp-text-field .MuiOutlinedInput-input { padding: 0 14px; }
.imp-text-field .MuiOutlinedInput-notchedOutline { border-color: #DDE0E5; border-radius: 6px; }
.imp-text-field .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: #A8A49C; }


.imp-notice { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: 7px; background: #FFFBEB; border: 1px solid #FDE68A; margin-top: 10px; }
.imp-notice-svg { flex-shrink: 0; margin-top: 1px; }
.imp-notice-text { margin: 0; font-size: 12px; color: #78350F; line-height: 1.5; }

.imp-consent-row { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; padding: 8px 10px; background: #fff; border: 1px solid #DDE0E5; border-radius: 7px; }
.imp-consent-label { font-size: 12px; color: #706D65; line-height: 1.5; cursor: pointer; }

.imp-map-label-span { display: flex; align-items: center; gap: 6px; }
.imp-map-label-svg { flex-shrink: 0; }
.imp-map-delete-text { color: #DC2626; }

.imp-map-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-bottom: 1px solid #E8EAED; }
.imp-col-chip { flex: 0 0 40%; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px; background: #ECEEF1; border: 1px solid #DDE0E5; font-size: 12px; font-weight: 500; color: #706D65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-arrow { flex-shrink: 0; font-size: 13px; color: #A8A49C; }
.imp-crm-field-wrap { flex: 1; }

.imp-info-banner { display: flex; align-items: flex-start; justify-content: space-between; padding: 10px 13px; background: #EEF3FF; border: 1px solid #BFCFFF; border-radius: 8px; margin-bottom: 16px; }
.imp-info-banner-left { display: flex; align-items: flex-start; gap: 8px; flex: 1; }
.imp-info-banner-svg { flex-shrink: 0; margin-top: 1px; }
.imp-info-banner-text { margin: 0; font-size: 12.5px; color: #1E40AF; line-height: 1.5; }
.imp-info-banner-right { flex-shrink: 0; margin-left: 8px; }

.imp-save-mapping-wrap { margin-bottom: 8px; }

.imp-col-header-row { display: flex; align-items: center; padding: 0 10px 8px; border-bottom: 1px solid #DDE0E5; margin-bottom: 0; }
.imp-col-header-spacer { width: 7px; flex-shrink: 0; margin-right: 10px; }
.imp-col-header-label { flex: 0 0 40%; font-size: 10.5px; font-weight: 600; color: #A8A49C; text-transform: uppercase; letter-spacing: 0.07em; }
.imp-col-header-arrow-spacer { flex-shrink: 0; width: 30px; }
.imp-col-header-crm-label { flex: 1; font-size: 10.5px; font-weight: 600; color: #A8A49C; text-transform: uppercase; letter-spacing: 0.07em; }

.imp-details-col { display: flex; flex-direction: column; }

.imp-link-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.imp-link-select { height: 34px; font-size: 13px; }

.imp-dup-section { margin-top: 18px; padding-top: 16px; border-top: 1px solid #E8EAED; }
.imp-dup-title { font-size: 12.5px; font-weight: 600; color: #1A1917; margin-bottom: 8px; }
.imp-dup-sub { font-size: 12.5px; color: #706D65; margin-bottom: 6px; }
.imp-dup-select-wrap { width: 50%; margin-bottom: 14px; }
.imp-dup-select { height: 32px; font-size: 12.5px; }
.imp-dup-radio-row { display: flex; gap: 10px; }
.imp-radio-label { font-size: 12.5px; font-weight: 600; color: #1A1917; }
.imp-radio-desc { font-size: 12.5px; color: #A8A49C; margin-top: 2px; line-height: 1.4; }

.imp-loading-panel { text-align: center; padding: 48px 20px; }
.imp-spinner-base { width: 40px; height: 40px; border: 3px solid #DDE0E5; border-radius: 50%; animation: imSpin 0.75s linear infinite; margin: 0 auto 14px; }
.imp-spinner-sm { width: 18px; height: 18px; border: 2px solid #DDE0E5; border-radius: 50%; animation: imSpin 0.75s linear infinite; flex-shrink: 0; }
.imp-progress-bar { height: 3px; background: #DDE0E5; border-radius: 2px; overflow: hidden; margin: 0 auto 16px; max-width: 280px; }
.imp-progress-fill-base { height: 100%; border-radius: 2px; animation: imProgress 2s ease-in-out forwards; }
.imp-loading-title { font-size: 14px; font-weight: 600; color: #1A1917; margin-bottom: 4px; }
.imp-loading-sub { font-size: 12.5px; color: #A8A49C; }

.imp-success-panel { text-align: center; padding: 12px 20px; }
.imp-success-icon { width: 56px; height: 56px; border-radius: 50%; background: #F0FDF4; border: 2px solid #86EFAC; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; color: #16A34A; }
.imp-success-title { font-size: 16px; font-weight: 700; color: #1A1917; margin-bottom: 5px; }
.imp-success-sub { font-size: 13px; color: #706D65; margin-bottom: 12px; }
.imp-stats-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 12px; }
.imp-stat-card-green { padding: 12px 20px; border-radius: 10px; background: #F0FDF4; border: 1px solid #86EFAC; text-align: center; min-width: 90px; }
.imp-stat-value-green { font-size: 22px; font-weight: 700; color: #16A34A; }
.imp-stat-card-amber { padding: 12px 20px; border-radius: 10px; background: #FFFBEB; border: 1px solid #FDE68A; text-align: center; min-width: 90px; }
.imp-stat-value-amber { font-size: 22px; font-weight: 700; color: #D97706; }
.imp-stat-card-gray { padding: 12px 20px; border-radius: 10px; background: #F1F2F4; border: 1px solid #DDE0E5; text-align: center; min-width: 90px; }
.imp-stat-value-gray { font-size: 22px; font-weight: 700; color: #1A1917; }
.imp-stat-label { font-size: 11px; color: #A8A49C; margin-top: 2px; }
.imp-success-btn-row { display: flex; gap: 10px; justify-content: center; margin-bottom: 8px; }
.imp-btn-close { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; border: 1px solid #DDE0E5; background: #fff; color: #706D65; }
.imp-btn-primary, .MuiButton-root.imp-btn-primary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 500; font-family: inherit; cursor: pointer; border: none; color: #fff; background: var(--imp-theme-color); box-shadow: 0 1px 3px rgba(37,99,235,.3); text-transform: none; min-width: auto; }
.imp-save-btn-row { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 6px; }
.imp-save-btn-row .MuiButton-root { margin-top: 0; }
.imp-btn-secondary, .MuiButton-root.imp-btn-secondary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 500; font-family: inherit; cursor: pointer; border: 1px solid #DDE0E5; background: #fff; color: #706D65; text-transform: none; min-width: auto; }
.imp-modal { display: flex; flex-direction: column; font-family: 'Inter','Lato',sans-serif; background: #fff; height: 100%; min-height: 0; }
.imp-header { padding: 0 20px; border-bottom: 1px solid #E8EAED; flex-shrink: 0; background: #fff; }
.imp-title-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 10px; }
.imp-title { font-size: 14px; font-weight: 600; color: #1A1917; display: flex; align-items: center; gap: 8px; }
.imp-title-icon { width: 26px; height: 26px; border-radius: 6px; background: #EEF3FF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.imp-close-btn { width: 26px; height: 26px; border-radius: 6px; border: 1px solid #DDE0E5; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #A8A49C; padding: 0; }
.imp-stepper { display: flex; align-items: center; padding: 0 0 10px; gap: 0; }
.imp-step { display: flex; align-items: center; gap: 6px; }
.imp-step-bubble { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; border: 1.5px solid #DDE0E5; background: #fff; color: #A8A49C; }
.imp-step-label { font-size: 11px; font-weight: 500; color: #A8A49C; white-space: nowrap; margin-left: 6px; }
.imp-connector { flex: 1; height: 1px; background: #DDE0E5; margin: 0 8px; min-width: 30px; }
.imp-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 20px; scrollbar-width: none; -ms-overflow-style: none; }
.imp-body::-webkit-scrollbar { display: none; }
.imp-body--centered { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0; }
.imp-error-msg { display: flex; align-items: center; gap: 5px; color: #DC2626; font-size: 12px; margin-top: 8px; padding: 7px 10px; background: #FFF5F5; border-radius: 6px; border: 1px solid #FECACA; }
.imp-footer { padding: 10px 20px; border-top: 1px solid #E8EAED; display: flex; align-items: center; justify-content: space-between; background: #F1F2F4; flex-shrink: 0; }
.imp-footer-hint { font-size: 11px; color: #A8A49C; display: flex; align-items: center; gap: 5px; }
.imp-footer-actions { display: flex; gap: 8px; }

.imp-apply-wf-section { background-color: #ffffff; border: 1px solid #dddddd; border-radius: 4px; padding: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 16px; }
.imp-apply-wf-btn-row { display: flex; align-items: center; gap: 12px; }
.imp-apply-wf-text { font-size: 14px; color: #717171; }
.imp-blockquote-hidden { display: none; }
.imp-applied-status { padding: 10px 16px; background-color: #e8f5e9; border: 1px solid #c8e6c9; border-radius: 4px; color: #2e7d32; font-size: 14px; margin-bottom: 12px; }
.imp-apply-success-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #191919; padding-left: 10px; }
.imp-ok-icon { color: #32a84f; }

.imp-assign-inner { margin-top: 12px; }
.imp-assign-label-mt { margin-top: -7px; }
.imp-select-h42 { height: 42px; }
.imp-wf-padtop { padding-top: 16px; }
.imp-save-assign-row { display: flex; justify-content: flex-end; margin-top: 12px; padding-bottom: 4px; }

.imp-th-icon-col { width: 28px; }

.imp-html-success-btn-row { display: flex; gap: 8px; justify-content: center; }

.imp-html-hidden { display: none; }
.imp-half-width { width: 50%; }
.imp-dup-field-wrap { margin-bottom: 12px; max-width: 300px; }
.imp-td-center { text-align: center; }

.imp-upload-zone {
  border: 2px dashed #DDE0E5;
  border-radius: 10px;
  background: #F1F2F4;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease-in-out, background 0.2s ease-in-out;
}
.imp-upload-zone:hover {
  border-color: var(--imp-theme-color);
  background: #EEF3FF;
}

/* When file is uploaded */
.imp-upload-zone.has-file {
  border: 2px solid #16A34A;
  background: #F0FDF4;
  cursor: default;
}

/* ══════════════════════════════════════════════════════════════════
   CONVERT MODAL
   ══════════════════════════════════════════════════════════════════ */
.cm-modal-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(17,20,27,0.4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
.cm-modal-backdrop.open { display: flex; }

.convert-modal {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.1);
  width: 540px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
  overflow: hidden;
  animation: cmModalIn 0.2s cubic-bezier(0.34,1.1,0.64,1) both;
  display: flex;
  flex-direction: column;
}
@keyframes cmModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ── */
.cm-header {
  background: #374151;
  padding: 0 16px;
  height: 48px;
  display: flex; align-items: center; justify-content: space-between;
  border-radius: 12px 12px 0 0;
  flex-shrink: 0;
}
.cm-header-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cm-header-icon {
  width: 26px; height: 26px; border-radius: 6px;
  background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85); flex-shrink: 0;
}
.cm-title { font-size: 13.5px; font-weight: 600; color: white; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.cm-subtitle { font-size: 12px; color: rgba(255,255,255,0.45); margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-header-btns { display: flex; gap: 4px; flex-shrink: 0; }
.cm-hbtn {
  width: 26px; height: 26px; border-radius: 5px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6); cursor: pointer; transition: all 0.12s;
}
.cm-hbtn:hover { background: rgba(255,255,255,0.16); color: white; }
.cm-hbtn.cm-close:hover { background: rgba(220,38,38,0.65); border-color: transparent; color: white; }

/* ── Body ── */
.cm-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; flex: 1; min-height: 0; }

/* Subtle scrollbar */
.cm-body::-webkit-scrollbar { width: 4px; }
.cm-body::-webkit-scrollbar-track { background: transparent; }
.cm-body::-webkit-scrollbar-thumb { background: #DDE0E5; border-radius: 4px; }
.cm-body::-webkit-scrollbar-thumb:hover { background: #B0B5BF; }

/* ── Connected from→to flow selector ── */
.cm-flow-selector {
  display: flex; align-items: flex-end; gap: 10px;
  background: #ECEEF1;
  border: 1.5px solid #DDE0E5;
  border-radius: 6px;
  padding: 10px 14px;
}
.cm-fs-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.cm-fs-label {
  font-size: 11px; font-weight: 500;
  color: #706D65; letter-spacing: 0.03em;
  text-transform: uppercase;
}
.cm-fs-select-wrap { position: relative; }
.cm-fs-select-wrap select {
  width: 100%; padding: 8px 28px 8px 10px;
  border: 1.5px solid #DDE0E5;
  border-radius: 6px;
  font-size: 13.5px; font-weight: 500;
  color: #1A1917; background: #FFFFFF;
  font-family: inherit; appearance: none; outline: none;
  cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s;
}
.cm-fs-select-wrap select:focus { box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.cm-fs-from select:focus { border-color: #D97706; box-shadow: 0 0 0 3px rgba(217,119,6,0.1); }
.cm-fs-to select:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.cm-fs-from select { border-left: 3px solid #D97706; }
.cm-fs-to select { border-left: 3px solid #2563EB; }
.cm-fs-caret {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: #A8A49C; pointer-events: none;
}
.cm-fs-arrow {
  color: #A8A49C; flex-shrink: 0;
  display: flex; align-items: center;
  padding-bottom: 2px;
}

/* MUI Select overrides inside flow selector */
.cm-flow-selector .MuiFormControl-root { flex: 1; min-width: 0; }
.cm-flow-selector .MuiInputBase-root { height: 38px; background: #fff; border-radius: 6px; font-size: 13.5px; font-weight: 500; }
.cm-flow-selector .MuiOutlinedInput-notchedOutline { border: 1.5px solid #DDE0E5; }
.cm-flow-selector .cm-fs-from .MuiOutlinedInput-notchedOutline { border-left: 3px solid #D97706; }
.cm-flow-selector .cm-fs-to .MuiOutlinedInput-notchedOutline { border-left: 3px solid #2563EB; }
.cm-flow-selector .MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline { border-color: #B0B5BF; }
.cm-flow-selector .cm-fs-from .MuiInputBase-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #D97706; box-shadow: 0 0 0 3px rgba(217,119,6,0.1); }
.cm-flow-selector .cm-fs-to .MuiInputBase-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.cm-flow-selector .MuiInputLabel-root { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; color: #706D65; }

/* ── Option tile (create next task) ── */
.cm-option {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid #DDE0E5;
  border-radius: 6px;
  cursor: pointer; transition: all 0.12s; user-select: none;
}
.cm-option:hover { border-color: #BFCFFF; background: #EEF3FF; }
.cm-option.checked { border-color: #BFCFFF; background: #EEF3FF; }
.cm-checkbox {
  width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid #DDE0E5; background: white; transition: all 0.12s;
  display: flex; align-items: center; justify-content: center;
}
.cm-option.checked .cm-checkbox { background: #2563EB; border-color: #2563EB; }
.cm-checkbox svg { display: none; }
.cm-option.checked .cm-checkbox svg { display: block; }
.cm-option-body { flex: 1; min-width: 0; }
.cm-option-label { font-size: 13px; font-weight: 500; color: #1A1917; }
.cm-option-desc { font-size: 11.5px; color: #A8A49C; margin-top: 1px; }

/* ── Task panels ── */
.cm-panels { display: grid; grid-template-columns: 1fr; gap: 10px; }
.cm-panel {
  display: flex; flex-direction: column;
  border: 1.5px solid #DDE0E5;
  border-radius: 6px;
  overflow: hidden; min-height: 0;
}
.cm-panel-head {
  padding: 8px 12px;
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid #DDE0E5;
  flex-shrink: 0;
}
.cm-panel-head.pending { background: #FFFBEB; }
.cm-panel-head.upcoming { background: #EEF3FF; }
.cm-all-check { width: 13px; height: 13px; flex-shrink: 0; cursor: pointer; }
.cm-panel-head.pending .cm-all-check { accent-color: #D97706; }
.cm-panel-head.upcoming .cm-all-check { accent-color: #2563EB; }
.cm-panel-title {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.cm-panel-head.pending .cm-panel-title { color: #D97706; }
.cm-panel-head.upcoming .cm-panel-title { color: #2563EB; }
.cm-panel-badge {
  font-size: 11px; font-weight: 500;
  padding: 1px 7px; border-radius: 10px;
  margin-left: auto; white-space: nowrap;
}
.cm-panel-head.pending .cm-panel-badge { background: #FEF3C7; color: #D97706; }
.cm-panel-head.upcoming .cm-panel-badge { background: #BFCFFF; color: #2563EB; }
.cm-panel-scroll {
  overflow-y: auto; max-height: 200px;
  display: flex; flex-direction: column;
}
.cm-panel-scroll::-webkit-scrollbar { width: 4px; }
.cm-panel-scroll::-webkit-scrollbar-track { background: transparent; }
.cm-panel-scroll::-webkit-scrollbar-thumb { background: #DDE0E5; border-radius: 4px; }
.cm-panel-scroll::-webkit-scrollbar-thumb:hover { background: #B0B5BF; }

/* ── Task rows ── */
.cm-task {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border-bottom: 1px solid #E8EAED;
  background: #FFFFFF; transition: background 0.1s;
}
.cm-task:last-child { border-bottom: none; }
.cm-task:hover { background: #F7F8FA; }
.cm-task-check {
  width: 14px; height: 14px; flex-shrink: 0;
  accent-color: #2563EB; cursor: pointer;
}
.cm-task-icon { color: #A8A49C; display: flex; align-items: center; flex-shrink: 0; }
.cm-task-name { flex: 1; font-size: 12.5px; color: #1A1917; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-task-rm {
  width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;
  color: #A8A49C; border-radius: 3px; cursor: pointer; transition: all 0.12s;
  flex-shrink: 0;
}
.cm-task-rm:hover { background: #FFF5F5; color: #DC2626; }
.cm-due-chip {
  font-size: 11px; font-weight: 500;
  color: #A8A49C;
  background: #ECEEF1;
  border: 1px solid #DDE0E5;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap; flex-shrink: 0;
}
.cm-due-overdue {
  color: #DC2626;
  background: #FFF5F5;
  border-color: #FECACA;
}
.cm-task-required {
  font-size: 10px; font-weight: 500; color: #DC2626;
  margin-left: 4px; flex-shrink: 0;
}

/* ── Note ── */
.cm-note-wrap { display: flex; flex-direction: column; gap: 5px; }
.cm-note-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  color: #706D65;
}
.cm-note-label span { font-weight: 400; text-transform: none; }
.cm-note-wrap textarea {
  width: 100%; padding: 10px 12px;
  border: 1.5px solid #DDE0E5; border-radius: 6px;
  font-size: 13px; color: #1A1917;
  font-family: inherit; resize: none; outline: none;
  line-height: 1.55; background: #FFFFFF; min-height: 76px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.cm-note-wrap textarea::placeholder { color: #A8A49C; }
.cm-note-wrap textarea:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

/* ── Required fields message ── */
.cm-required-msg {
  font-size: 13px; color: #706D65; line-height: 1.5;
}

/* ── Footer ── */
.cm-footer {
  padding: 11px 20px;
  border-top: 1px solid #E8EAED;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; flex-shrink: 0;
  flex-wrap: wrap;
}
.cm-footer-status {
  display: flex; align-items: center; gap: 8px; margin-right: auto; min-width: 0;
  max-width: 55%; flex-shrink: 1;
}
.cm-footer-status-label {
  font-size: 11px; font-weight: 500; color: #A8A49C;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex-shrink: 1; min-width: 0;
}
.cm-footer-status-wrap { position: relative; }
.cm-footer-status-wrap select {
  padding: 5px 26px 5px 9px;
  border: 1.5px solid #DDE0E5; border-radius: 6px;
  font-size: 12.5px; font-weight: 400; color: #706D65;
  background: #FFFFFF; font-family: inherit;
  appearance: none; outline: none; cursor: pointer;
  transition: border-color 0.15s;
}
.cm-footer-status-wrap select:focus { border-color: #2563EB; }
.cm-footer-status-wrap select:hover:not(:focus) { border-color: #B0B5BF; }
.cm-footer-status-caret {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  color: #A8A49C; pointer-events: none;
}

/* MUI Select override in footer */
.cm-footer-status .MuiFormControl-root { min-width: 100px; max-width: 150px; flex-shrink: 1; }
.cm-footer-status .MuiInputBase-root { height: 30px; font-size: 12px; border-radius: 6px; }
.cm-footer-status .MuiOutlinedInput-notchedOutline { border: 1.5px solid #DDE0E5; }
.cm-footer-status .MuiInputBase-root:hover .MuiOutlinedInput-notchedOutline { border-color: #B0B5BF; }
.cm-footer-status .MuiInputBase-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: #2563EB; }

.cm-btns { display: flex; gap: 8px; flex-shrink: 0; white-space: nowrap; }
.cm-btn {
  padding: 7px 18px; border-radius: 6px;
  font-size: 13px; font-weight: 500; font-family: inherit;
  cursor: pointer; border: none; outline: none; transition: all 0.15s;
}
.cm-btn-cancel {
  background: transparent; color: #706D65;
  border: 1.5px solid #DDE0E5;
}
.cm-btn-cancel:hover { background: #ECEEF1; border-color: #B0B5BF; color: #1A1917; }
.cm-btn-convert {
  background: #2563EB; color: white;
  display: flex; align-items: center; gap: 6px;
}
.cm-btn-convert:hover { background: #1D4ED8; transform: translateY(-0.5px); box-shadow: 0 2px 8px rgba(37,99,235,0.3); }
.cm-btn-convert:active { transform: none; }
.cm-btn-convert:disabled { background: #2563EB; opacity: 0.75; cursor: not-allowed; transform: none; box-shadow: none; }
@keyframes cm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cm-btn-convert .cm-spin-icon { animation: cm-spin 0.6s linear infinite; display: inline-flex; }
.cm-btn-next {
  background: #2563EB; color: white;
}
.cm-btn-next:hover { background: #1D4ED8; }
.cm-btn-next:disabled { background: #93B4F5; cursor: not-allowed; }
.cm-btn-opp {
  background: #FFFFFF; color: #2563EB;
  border: 1.5px solid #2563EB;
  display: flex; align-items: center; gap: 6px;
}
.cm-btn-opp:hover { background: #EEF3FF; }

/* ── Loading state ── */
.cm-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 200px;
}

/* FILTER MODAL */
.sf-filter-modal.MuiPaper-root {
  width: 680px !important;
  max-width: 96vw !important;
  max-height: 90vh !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* IMPORT MODAL (DEFAULT) */
.sf-import-modal {
  width: 720px !important;
  max-width: 90vw !important;
  height: 90vh !important;
  max-height: 680px !important;
  border-radius: 12px !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* IMPORT MODAL (POST: loading/done) */
.sf-import-modal-post {
  border-radius: 12px !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* IMPORT DIALOG CONTENT (pre-import) */
.sf-import-modal .MuiDialogContent-root {
  padding: 0 !important;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* IMPORT DIALOG CONTENT (loading / done) */
.sf-import-modal-post .MuiDialogContent-root {
  padding: 0 !important;
  flex: 0 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* ── NEWS MODAL ── */
.news-modal-backdrop{display:none;position:fixed;inset:0;z-index:1250;background:rgba(17,20,27,.4);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);align-items:center;justify-content:center;}
.news-modal-backdrop.open{display:flex;}
.sf-news-modal{border-radius:10px !important;width:930px !important;max-width:calc(100vw - 40px) !important;max-height:calc(100vh - 48px) !important;display:flex !important;flex-direction:column !important;background:#fff;overflow:hidden !important;}
.news-modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;background:#374151;flex-shrink:0;border-radius:10px 10px 0 0;}
.news-modal-title{font-size:15px;font-weight:600;color:#fff;}
.news-modal-close{width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);cursor:pointer;border:none;background:transparent;}
.news-modal-close:hover{background:rgba(255,255,255,.15);color:#fff;}

/* News modal stepper */
.news-stepper{display:flex;align-items:center;padding:16px 28px;border-bottom:1px solid #DDE0E5;background:#f8f9fa;flex-shrink:0;}
.news-step{display:flex;align-items:center;gap:10px;}
.news-step-circle{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;border:2px solid #DDE0E5;background:#fff;color:#A8A49C;transition:all .2s;}
.news-step.active .news-step-circle{background:#2563EB;border-color:#2563EB;color:#fff;}
.news-step.done .news-step-circle{background:#16A34A;border-color:#16A34A;color:#fff;}
.news-step-label{display:flex;flex-direction:column;gap:1px;}
.news-step-sub{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#A8A49C;}
.news-step.active .news-step-sub{color:#2563EB;}
.news-step.done .news-step-sub{color:#16A34A;}
.news-step-name{font-size:13px;font-weight:600;color:#A8A49C;}
.news-step.active .news-step-name,.news-step.done .news-step-name{color:#1A1917;}
.news-step-line{flex:1;height:2px;background:#DDE0E5;margin:0 16px;border-radius:2px;transition:background .25s;}
.news-step-line.done{background:#16A34A;}

/* News modal body & fields */
.news-modal-body{padding:22px 26px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;flex:1;min-height:0;}
.news-f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.news-field{display:flex;flex-direction:column;gap:5px;flex-shrink:0;}
.news-step-hidden{position:absolute;left:-9999px;visibility:hidden;height:0;overflow:hidden;pointer-events:none;}

/* News modal plain form elements (matching HTML design) */
.news-f-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#A8A49C;}
.news-f-input,.news-f-select,.news-f-textarea{font-family:inherit;font-size:13px;color:#1A1917;background:#fff;border:1.5px solid #DDE0E5;border-radius:7px;outline:none;width:100%;box-sizing:border-box;}
.news-f-input{height:40px;padding:0 12px;}
.news-f-textarea{height:80px;padding:10px 12px;resize:none;line-height:1.6;}
.news-f-select{height:40px;padding:0 32px 0 12px;appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23A8A49C' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;}
.news-f-input::placeholder,.news-f-textarea::placeholder{color:#A8A49C;}
.news-f-input:focus,.news-f-select:focus,.news-f-textarea:focus{border-color:#2563EB;box-shadow:0 0 0 3px #EEF3FF;}

/* News upload zone */
.news-upload-zone{border:2px dashed #DDE0E5;border-radius:8px;padding:22px 24px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:all .18s;background:#ECEEF1;position:relative;}
.news-upload-zone:hover{border-color:#2563EB;background:#EEF3FF;}
.news-upload-icon{width:44px;height:44px;border-radius:10px;background:#EEF3FF;border:1px solid #BFCFFF;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.news-upload-zone:hover .news-upload-icon{background:#fff;}
.news-upload-text p{font-size:13px;color:#706D65;line-height:1.5;margin:0;}
.news-upload-text p strong{color:#2563EB;}
.news-upload-text span{font-size:11px;color:#A8A49C;}

/* News modal form container */
.news-form-wrap{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;}
.news-f-lbl .news-req{color:#2563EB;}
.news-radio-group.MuiRadioGroup-root{width:auto;height:38px;}
.news-radio-label.MuiFormControlLabel-root{color:#717171;}
.news-error-text{font-size:12px;color:#f44336;margin-top:4px;}
.news-file-hidden{display:none;}
.news-attachment-name{font-size:12px;color:#706D65;margin-top:4px;}
.news-attachment-preview{margin-top:8px;}
.news-attachment-preview img{height:100px;width:200px;object-fit:cover;border-radius:6px;}

/* News modal footer */
.news-modal-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 22px;border-top:1px solid #DDE0E5;background:#fafafa;flex-shrink:0;border-radius:0 0 10px 10px;}
.news-modal-footer-right{display:flex;align-items:center;gap:8px;}
.news-btn-primary{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 18px;border-radius:7px;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;border:none;background:#2563EB;color:#fff;}
.news-btn-primary:hover{background:#1D55D4;}
.news-btn-ghost{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 18px;border-radius:7px;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;background:#fff;color:#706D65;border:1.5px solid #DDE0E5;}
.news-btn-ghost:hover{background:#ECEEF1;}

/* News modal form field overrides */
.sf-news-modal .MuiDialogContent-root,.news-dialog-content{padding:0 !important;display:flex;flex-direction:column;height:100%;}
.news-mui-field{width:100%;}
.news-mui-field .MuiOutlinedInput-root{height:40px;border-radius:7px;font-size:13px;}
.news-mui-field .MuiOutlinedInput-notchedOutline{border:1.5px solid #DDE0E5;}
.news-mui-field .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline{border-color:#A8A49C;}
.news-mui-field .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:#2563EB;box-shadow:0 0 0 3px #EEF3FF;}
.news-mui-select .MuiSelect-select{display:flex;align-items:center;font-size:13px;}
.news-select-placeholder{color:#A8A49C;}

/* News modal Froala editor — only height override */
.sf-news-modal .fr-box.fr-basic .fr-wrapper{min-height:250px !important;}

/* Labels */
.sf-news-modal .MuiInputLabel-root{font-size:11px !important;font-weight:600 !important;text-transform:uppercase;letter-spacing:.07em;color:#A8A49C !important;}
.sf-news-modal .MuiInputLabel-root.Mui-focused{color:#2563EB !important;}
.sf-news-modal .MuiInputLabel-shrink{transform:translate(14px,-6px) scale(1) !important;font-size:11px !important;}

/* Outlined inputs - border, radius, height, font */
.sf-news-modal .MuiOutlinedInput-root{border-radius:7px !important;font-size:13px !important;font-family:'Inter',inherit !important;background:#fff;}
.sf-news-modal .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline{border:1.5px solid #DDE0E5 !important;}
.sf-news-modal .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline{border-color:#A8A49C !important;}
.sf-news-modal .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:#2563EB !important;box-shadow:0 0 0 3px #EEF3FF;}

/* Input height */
.sf-news-modal .MuiOutlinedInput-input{padding:10px 12px !important;font-size:13px !important;height:auto !important;}
.sf-news-modal .MuiInputBase-root{min-height:40px;}

/* Select height */
.sf-news-modal .MuiSelect-select{padding:10px 32px 10px 12px !important;font-size:13px !important;min-height:auto !important;}

/* Textarea (multiline) */
.sf-news-modal .MuiOutlinedInput-multiline{padding:0 !important;}
.sf-news-modal .MuiOutlinedInput-multiline .MuiOutlinedInput-input{padding:10px 12px !important;min-height:60px !important;line-height:1.6;resize:none;}

/* Placeholder */
.sf-news-modal .MuiOutlinedInput-input::placeholder{color:#A8A49C !important;opacity:1 !important;}

/* Radio buttons */
.sf-news-modal .MuiRadio-root.Mui-checked{color:#2563EB !important;}
.sf-news-modal .MuiFormControlLabel-label{font-size:13px !important;}

/* Save / Cancel buttons area */
.sf-news-modal .MuiButton-contained{background:#2563EB !important;border-radius:7px !important;text-transform:none !important;font-size:13px !important;font-weight:500 !important;padding:8px 18px !important;box-shadow:none !important;}
.sf-news-modal .MuiButton-contained:hover{background:#1D55D4 !important;}
.sf-news-modal .MuiButton-outlined,.sf-news-modal .MuiButton-text{border-radius:7px !important;text-transform:none !important;font-size:13px !important;font-weight:500 !important;}

/* ── NEWS CARD VIEW ── */
.news-view-toggle-wrap{display:flex;align-items:center;margin-right:6px;}
.news-view-toggle{display:flex;align-items:center;background:#ECEEF1;border:1px solid #DDE0E5;border-radius:8px;padding:3px;gap:2px;}
.news-vt-btn{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#A8A49C;border:none;background:transparent;transition:all .15s;}
.news-vt-btn.active{background:#fff;color:#2563EB;box-shadow:0 1px 3px rgba(0,0,0,.1);}
.news-vt-btn:hover:not(.active){background:rgba(0,0,0,.04);}

.news-cards-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;overflow-y:auto;max-height:calc(100vh - 250px);padding-bottom:20px;padding-top:8px;}
.news-cards-wrap.news-cards-fe{max-height:inherit;padding-top: unset;}
.news-card{border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s;position:relative;overflow:hidden;background:#fff;border:1px solid #DDE0E5;}
.news-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);transform:translateY(-2px);}
.news-card.selected{border-color:#2563EB;box-shadow:0 0 0 3px #EEF3FF;}

.news-card .card-cb{position:absolute;top:10px;left:10px;z-index:10;width:15px;height:15px;border-radius:4px;border:1.5px solid rgba(255,255,255,.8);cursor:pointer;appearance:none;-webkit-appearance:none;display:block;transition:background .15s,border-color .15s;box-shadow:0 1px 4px rgba(0,0,0,.2);}
.news-card .card-cb:not(:checked){background:rgba(255,255,255,.85);}
.news-card .card-cb:checked{background:#2563EB;border-color:#2563EB;}
.news-card-image{display:block;width:100%;height:155px;object-fit:cover;flex-shrink:0;}
.news-card-placeholder{display:flex;align-items:center;justify-content:center;width:100%;height:155px;flex-shrink:0;background:#E0E7FF;}
.news-card-placeholder svg{display:block;width:100%;height:155px;}

.news-card-status-badge{position:absolute;top:10px;right:10px;z-index:2;pointer-events:none;}
.news-status-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:500;white-space:nowrap;}
.news-status-badge .status-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.ns-published{background:#ECFEFF;color:#0891B2;}
.ns-published .status-dot{background:#0891B2;}
.ns-draft{background:#F5F3FF;color:#7C3AED;}
.ns-draft .status-dot{background:#7C3AED;}
.ns-expired{background:#FFF7ED;color:#EA580C;}
.ns-expired .status-dot{background:#EA580C;}

.news-card .card-info{display:flex;flex-direction:column;padding:12px 14px;flex:1;}
.news-card .card-meta-line{display:flex;align-items:center;gap:5px;flex-wrap:wrap;font-size:11px;color:#A8A49C;margin-bottom:7px;}
.news-card .card-meta-sep{opacity:.4;}
.news-card .card-meta-author{color:#706D65;font-weight:500;}
.news-card .card-title{font-size:13px;font-weight:700;color:#1A1917;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer;margin-bottom:6px;}
.news-card .card-title:hover{color:#2563EB;}
.news-card .card-summary{font-size:12px;color:#A8A49C;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1;}
.news-card .card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid #E8EAED;}
.news-card .card-author-wrap{display:flex;align-items:center;gap:6px;font-size:12px;color:#706D65;}
.news-card .author-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#93C5FD,#2563EB);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:white;flex-shrink:0;}
.news-card .card-actions{display:flex;gap:4px;}
.news-card .card-act{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;border:1px solid #DDE0E5;background:#fff;color:#A8A49C;cursor:pointer;transition:all .15s;}
.news-card .card-act:hover{background:#EEF3FF;color:#2563EB;border-color:#BFCFFF;}
.news-card .card-act.del:hover{background:#FEF2F2;color:#DC2626;border-color:rgba(220,38,38,.2);}

/* ── USEFUL LINK DIALOG ── */
.sf-useful-link-modal{border-radius:14px !important;max-width:480px !important;overflow:hidden !important;font-family:'Inter','Lato',sans-serif !important;}
.sf-useful-link-dialog-content,.sf-useful-link-dialog-content.MuiDialogContent-root{padding:0 !important;display:flex;flex-direction:column;height:auto !important;overflow:visible !important;}

.m-body{padding:24px;display:flex;flex-direction:column;gap:0;}
.m-footer{border-top:1px solid #DDE0E5;padding:14px 20px;display:flex;justify-content:flex-end;gap:8px;background:#fff;}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.field:last-child{margin-bottom:0;}
.f-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#A8A49C;}
.f-lbl .req{color:#2563EB;}
.f-input,.f-select{font-family:'Inter','Lato',sans-serif;font-size:13px;color:#1A1917;background:#fff;border:1px solid #DDE0E5;border-radius:7px;outline:none;width:100%;height:40px;padding:0 12px;transition:border-color .15s,box-shadow .15s;box-sizing:border-box;}
.f-input:focus,.f-select:focus{border-color:#2563EB;box-shadow:0 0 0 3px #EEF3FF;}
.f-input::placeholder{color:#A8A49C;}
.f-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23A8A49C' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}

.btn-sm{height:36px;padding:0 20px;border-radius:7px;font-size:13px;font-weight:500;font-family:'Inter','Lato',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .15s;}
.btn-ghost{background:#fff;color:#706D65;border:1px solid #DDE0E5;}
.btn-ghost:hover{background:#ECEEF1;}
.btn-blue{background:#2563EB;color:white;border:none;}
.btn-blue:hover{background:#1D55D4;}
.btn-blue:disabled{opacity:.5;cursor:not-allowed;}

.m-header-left{display:flex;align-items:center;gap:10px;}
.m-header-icon{width:30px;height:30px;border-radius:7px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;}
.m-badge{font-size:11px;font-weight:500;background:rgba(255,255,255,.15);color:rgba(255,255,255,.8);padding:2px 9px;border-radius:20px;}

/* ── USEFUL LINK DIALOG MUI OVERRIDES ── */
.sf-ul-mui-field{width:100%;}
.sf-ul-mui-field .MuiOutlinedInput-root{height:40px;border-radius:7px;font-size:13px;}
.sf-ul-mui-field .MuiOutlinedInput-notchedOutline{border:1px solid #DDE0E5;}
.sf-ul-mui-field .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline{border-color:#A8A49C;}
.sf-ul-mui-field .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:#2563EB;box-shadow:0 0 0 3px #EEF3FF;}
.sf-ul-mui-select .MuiSelect-select{display:flex;align-items:center;font-size:13px;color:#1A1917;}
.sf-ul-mui-select .MuiSelect-select[value=""]{color:#A8A49C;}
.sf-ul-select-placeholder{color:#A8A49C;}

/* ── USEFUL LINK DELETE DIALOG ── */
.sf-useful-link-del-modal{border-radius:12px !important;border:1px solid #DDE0E5 !important;max-width:360px !important;width:360px !important;font-family:'Inter','Lato',sans-serif !important;}
.sf-useful-link-del-modal .MuiDialogContent-root{padding:0 !important;overflow:hidden !important;}
.del-body{padding:28px 24px 16px;text-align:center;}
.del-icon{width:48px;height:48px;border-radius:50%;background:#FFF5F5;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.del-title{font-size:15px;font-weight:700;margin-bottom:6px;color:#1A1917;}
.del-sub{font-size:13px;color:#706D65;line-height:1.6;}
.del-sub .move-links-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;margin-top:6px;}
.del-footer-btns{display:flex;justify-content:center;gap:10px;padding:8px 24px 22px;}
.btn-danger{height:36px;padding:0 20px;border-radius:7px;font-size:13px;font-weight:600;font-family:'Inter','Lato',sans-serif;cursor:pointer;background:#DC2626;color:white;border:none;transition:background .15s;}
.btn-danger:hover{background:#B91C1C;}

/* ── USEFUL LINKS CARDS ── */
.sf-ul-page{width:100%;padding:20px 24px 48px;font-family:'Inter','Lato',sans-serif;}
.sf-ul-controls{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.sf-ul-search{display:flex;align-items:center;gap:8px;border:1px solid #DDE0E5;border-radius:8px;padding:7px 12px;background:#fff;flex:1;max-width:320px;}
.sf-ul-search input{border:none;outline:none;background:none;font-size:13px;font-family:inherit;color:#1A1917;width:100%;}
.sf-ul-search input::placeholder{color:#A8A49C;}
.sf-ul-count-pill{font-size:12px;font-weight:500;color:#A8A49C;background:#fff;border:1px solid #DDE0E5;padding:4px 12px;border-radius:20px;white-space:nowrap;margin-left:auto;}
.sf-ul-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.sf-ul-empty{display:flex;flex-direction:column;align-items:center;padding:64px 20px;text-align:center;}
.sf-ul-empty-icon{width:52px;height:52px;border-radius:14px;background:#EEF3FF;border:1px solid #BFCFFF;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.sf-ul-empty-title{font-size:15px;font-weight:600;margin-bottom:5px;color:#1A1917;}
.sf-ul-empty-sub{font-size:13px;color:#A8A49C;}
.sf-ul-card{background:#fff;border:1px solid #DDE0E5;border-radius:12px;overflow:hidden;min-height:200px;display:flex;flex-direction:column;transition:box-shadow .15s ease,border-color .15s ease;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.sf-ul-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.11);border-color:#C5CAD4;}
.sf-ul-card-head{display:flex;align-items:center;justify-content:space-between;padding:13px 14px 11px;border-bottom:1px solid #E8EAED;}
.sf-ul-card-head-left{display:flex;align-items:center;gap:8px;min-width:0;}
.sf-ul-cat-icon{width:28px;height:28px;border-radius:7px;background:#EEF3FF;border:1px solid #BFCFFF;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sf-ul-cat-name{font-size:13px;font-weight:600;color:#1A1917;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px;}
.sf-ul-cat-count{font-size:11px;color:#A8A49C;margin-left:6px;font-weight:500;flex-shrink:0;}
.sf-ul-card-head-actions{display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .15s ease;flex-shrink:0;}
.sf-ul-card:hover .sf-ul-card-head-actions{opacity:1;}
.sf-ul-head-btn{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;border:1px solid #DDE0E5;background:#fff;cursor:pointer;color:#A8A49C;transition:all .12s ease;padding:0;}
.sf-ul-head-btn:hover{background:#EEF3FF;border-color:#BFCFFF;color:#2563EB;}
.sf-ul-head-btn-del:hover{background:#FFF5F5;border-color:#FECACA;color:#DC2626;}
.sf-ul-card-links{padding:8px 0;}
.sf-ul-no-links{padding:10px 14px;font-size:12px;color:#A8A49C;font-style:italic;}
.sf-ul-link-row{display:flex;align-items:center;padding:0 8px;position:relative;}
.sf-ul-link-row:hover{background:#EEF3FF;}
.sf-ul-link-inner{display:flex;align-items:center;gap:8px;flex:1;padding:7px 6px;min-width:0;}
.sf-ul-link-bullet{width:5px;height:5px;border-radius:50%;background:#BFCFFF;flex-shrink:0;}
.sf-ul-link-anchor{font-size:13px;color:#2563EB;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;cursor:pointer;}
.sf-ul-link-anchor:hover{text-decoration:underline;}
.sf-ul-link-row-actions{display:flex;align-items:center;gap:3px;opacity:0;transition:opacity .12s ease;flex-shrink:0;}
.sf-ul-link-row:hover .sf-ul-link-row-actions{opacity:1;}
.sf-ul-link-btn{width:24px;height:24px;border-radius:5px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;cursor:pointer;color:#A8A49C;transition:all .12s ease;padding:0;}
.sf-ul-link-btn:hover{background:rgba(37,99,235,.12);color:#2563EB;}
.sf-ul-link-btn-del:hover{background:#FFF5F5;color:#DC2626;}
.sf-ul-add-link{display:flex;align-items:center;gap:8px;padding:7px 14px 10px;cursor:pointer;opacity:0;transition:opacity .15s ease;}
.sf-ul-card:hover .sf-ul-add-link{opacity:1;}
.sf-ul-add-link:hover .sf-ul-add-link-label{text-decoration:underline;}
.sf-ul-add-link-label{font-size:12px;font-weight:500;color:#2563EB;}
.sf-ul-search svg{flex-shrink:0;}
.news-card .cat-pill{display:inline-block;padding:1px 7px;border-radius:4px;font-size:11px;color:#706D65;background:#ECEEF1;border:1px solid #DDE0E5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;vertical-align:middle;}

* ── ASSIGN DIALOG ── */
.sf-assign-field .MuiInputLabel-root{font-size:11px !important;font-weight:600 !important;text-transform:uppercase !important;letter-spacing:0.06em !important;color:#A8A49C !important;}
.sf-assign-field .MuiOutlinedInput-root{font-size:13px !important;color:#1A1917 !important;background-color:#ffffff !important;border-radius:6px !important;}
.sf-assign-field .MuiInputBase-input{font-size:13px !important;color:#1A1917 !important;}
.sf-assign-field .MuiOutlinedInput-notchedOutline{border-color:#DDE0E5 !important;}
.sf-assign-field .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline{border-color:#A8A49C !important;}
.sf-assign-field .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:#2563EB !important;}

.sf-assign-note-field .MuiOutlinedInput-root{min-height:120px !important;align-items:flex-start !important;}
.sf-assign-note-field .MuiInputBase-inputMultiline{line-height:1.6 !important;font-size:13px !important;color:#1A1917 !important;}.sf-assign-note-input::placeholder{color:#706D65 !important;opacity:1 !important;}

.sf-assign-paper .MuiAutocomplete-option{font-size:13px !important;color:#1A1917 !important;}
.sf-assign-paper .MuiAutocomplete-option[aria-selected="true"]{background-color:#EEF3FF !important;color:#2563EB !important;}
.sf-assign-paper .MuiAutocomplete-option.Mui-focused{background-color:#ECEEF1 !important;}

.sf-assign-checkbox.MuiCheckbox-root{color:#DDE0E5 !important;padding:6px !important;}
.sf-assign-checkbox.MuiCheckbox-root.Mui-checked{color:#2563EB !important;}

.sf-btn-secondary.MuiButton-root{padding:8px 22px !important;font-size:13px !important;font-weight:600 !important;background:#ffffff !important;color:#706D65 !important;border:1.5px solid #DDE0E5 !important;border-radius:8px !important;text-transform:none !important;min-width:auto !important;line-height:normal !important;box-shadow:none !important;}
.sf-btn-secondary.MuiButton-root:hover{background:#ECEEF1 !important;border-color:#C5C9D0 !important;}

.sf-btn-primary.MuiButton-root{padding:8px 24px !important;font-size:13px !important;font-weight:600 !important;background:#2563EB !important;color:#ffffff !important;border:none !important;border-radius:8px !important;text-transform:none !important;min-width:auto !important;line-height:normal !important;box-shadow:none !important;}
.sf-btn-primary.MuiButton-root:hover{background:#1D55D4 !important;}

.sf-assign-label{display:block;font-size:11px !important;font-weight:600 !important;text-transform:uppercase !important;letter-spacing:0.06em !important;color:#A8A49C !important;margin-bottom:6px;}
.sf-assign-label-opt{font-size:11px !important;font-weight:400 !important;text-transform:none !important;letter-spacing:0 !important;color:#A8A49C !important;}

/* ── Add to Group dialog ────────────────────────────────── */
.sf-atg-body {
    padding: 28px 24px 24px;
    background: #f1f2f4;
}
.sf-atg-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
}
.sf-atg-radio-wrap{margin-bottom:16px;}
.sf-atg-field-wrap{margin-bottom:20px;}

/* Autocomplete tag-input area */
.sf-atg-field .MuiOutlinedInput-root{background-color:#fff !important;border-radius:6px !important;min-height:38px !important;padding:4px 36px 4px 8px !important;flex-wrap:wrap !important;align-items:center !important;gap:4px !important;font-size:13px !important;cursor:pointer !important;}
.sf-atg-field .MuiInputBase-input{font-size:13px !important;color:#1A1917 !important;padding:2px 4px !important;min-width:80px !important;}
.sf-atg-field .MuiOutlinedInput-notchedOutline{border-color:#DDE0E5 !important;border-radius:6px !important;}
.sf-atg-field .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline{border-color:#A8A49C !important;}
.sf-atg-field .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline{border-color:#2563EB !important;}
.sf-atg-field .MuiAutocomplete-endAdornment{position:absolute !important;right:8px !important;top:50% !important;transform:translateY(-50%) !important;}
.sf-atg-field .MuiAutocomplete-clearIndicator{display:none !important;}
.sf-atg-field .MuiAutocomplete-popupIndicator{padding:2px !important;color:#A8A49C !important;background:transparent !important;}
.sf-atg-field .MuiAutocomplete-popupIndicator:hover{background:transparent !important;}
.sf-atg-field>.MuiFormControl-marginDense{margin-top:0;margin-bottom:0;}

/* Dropdown paper */
.sf-atg-paper{border:1px solid #DDE0E5 !important;border-radius:8px !important;box-shadow:0 6px 20px rgba(0,0,0,.15) !important;}
.sf-atg-paper .MuiAutocomplete-option{display:flex !important;align-items:center !important;gap:8px !important;padding:6px 12px !important;font-size:13px !important;color:#706D65 !important;background:#fff !important;min-height:unset !important;}
.sf-atg-paper .MuiAutocomplete-option.Mui-focused{background:#2563EB !important;color:#fff !important;}
.sf-atg-paper .MuiAutocomplete-option.Mui-focused .sf-atg-chk{border-color:rgba(255,255,255,.6) !important;}
.sf-atg-paper .MuiAutocomplete-option[aria-selected='true']{background:#2563EB !important;color:#fff !important;font-weight:500 !important;}
.sf-atg-paper .MuiAutocomplete-option[aria-selected='true'] .sf-atg-chk{background:#fff !important;border-color:#fff !important;}

/* Selected tags / chips */
.sf-atg-tag{display:inline-flex;align-items:center;gap:3px;background:#EEF3FF;color:#2563EB;border:1px solid #BFCFFF;border-radius:4px;padding:2px 7px;font-size:11px;font-weight:500;line-height:1.4;}
.sf-atg-tag-remove{background:none;border:none;cursor:pointer;color:#2563EB;font-size:13px;line-height:1;padding:0;}
.sf-atg-tag-remove:hover{color:#1D55D4;}

/* Checkbox indicator inside dropdown items */
.sf-atg-chk{width:15px;height:15px;border-radius:4px;border:1.5px solid #DDE0E5;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;}
.sf-atg-chk-sel{background:#fff;border-color:#fff;}

/* Link row */
.sf-atg-link-row{margin-bottom:24px;font-size:13px;color:#706D65;}
.sf-atg-link{color:#2563EB;cursor:pointer;font-weight:500;}
.sf-atg-link:hover{text-decoration:underline;}

/* Group name input */
.sf-atg-group-name-wrap{margin-bottom:24px;}
.sf-atg-group-name-input{width:100%;height:38px;padding:0 10px;font-size:13px;border:1px solid #DDE0E5;border-radius:6px;color:#1A1917;background:#fff;outline:none;box-sizing:border-box;font-family:inherit;}
.sf-atg-group-name-input:focus{border-color:#2563EB;}

/* Button row */
.sf-atg-btn-row{display:flex;align-items:center;justify-content:flex-end;gap:10px;}

/* ── Stats Row ── */
.sf-stats-row{display:flex;gap:12px;margin: 0 0rem 1rem 1rem;}
.sf-stat-card{flex:1;background:#FFFFFF;border:1px solid #DDE0E5;border-radius:12px;padding:18px 20px 16px;transition:box-shadow 0.18s,border-color 0.18s;}
.sf-stat-card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.08),0 2px 4px rgba(0,0,0,0.04);border-color:#C8CDD5;}
.sf-stat-label{font-size:11px;font-weight:500;color:#A8A49C;text-transform:uppercase;letter-spacing:0.07em;margin-bottom:8px;}
.sf-stat-value{font-size:32px;font-weight:700;letter-spacing:-1px;line-height:1;margin-bottom:6px;}
.sf-stat-sub{font-size:12px;color:#A8A49C;font-weight:400;}

.sf-lv-btn-action{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:6px 14px!important;border-radius:4px!important;font-size:13px!important;font-weight:500!important;line-height:normal!important;min-width:unset!important;min-height:unset!important;cursor:pointer;transition:all 0.15s;border:none;outline:none;color:#fff!important;box-shadow:0 1px 3px rgba(37,99,235,0.3)!important;text-transform:none!important;height:1.7rem}
.sf-lv-btn-action:hover{filter:brightness(0.88)!important;}
.sf-lv-btn-action .MuiButton-endIcon{border-left:1px solid rgba(255,255,255,0.3);padding-left:8px;margin-left:2px;display:flex;align-items:center;}
.sf-lv-btn-action .MuiButton-startIcon{margin-right:0;}
.sf-lv-btn-action svg{flex-shrink:0;}
.sf-lv-dropdown-item{padding:8px 14px!important;font-size:13px!important;color:#706D65!important;min-height:unset!important;}
.sf-lv-dropdown-item:hover{background:#ECEEF1!important;color:#1A1917!important;}
.sf-lv-dropdown-item svg{color:#A8A49C;}
.sf-unit-type-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;flex-shrink:0;cursor:default;line-height:1.5;}
.sf-badge-mf{background:#FDF4FF;color:#9333EA;border:1px solid #E9D5FF;}
.sf-badge-mu{background:#FFF7ED;color:#C2410C;border:1px solid #FED7AA;}
.sf-expand-icon{color:#3D3D3D;transition:transform 0.2s ease;display:inline-flex;align-items:center;font-weight:bold;}
.sf-expand-icon-open{transform:rotate(90deg);}