:root {
    /* Colors */
    --agentforce-gradient-start: #1abaff30;
    --agentforce-gradient-end: #bb01ff2d;
    /* --agentforce-primary: #112377; 
    --agentforce-primary-hover: #2F2CB7;
    --agentforce-primary-light: rgba(89, 63, 219, 0.1);
    --agentforce-primary-text-color: #1F0974; */
    /* --agentforce-secondary-hover: #d0d0de; */

    /** New Sets (19th Feb 2025) */
    --agentforce-primary: #3651C0;
    --agentforce-primary-hover: #2F2CB7;
    --agentforce-primary-light: rgba(89, 63, 219, 0.1);
    --agentforce-primary-text-color: #1F0974;
    --agentforce-secondary-hover: #d0d0de;
    
    
    /* Border Radius */
    --agentforce-radius-sm: 0.5rem;
    --agentforce-radius-md: 0.75rem;
    --agentforce-radius-lg: 1rem;
    
    /* Shadows */
    --agentforce-shadow-sm: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --agentforce-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    
    /* Transitions */
    --agentforce-transition: all 0.2s ease-in-out;
  }


  /* Cards */
  .af-card {
    border-radius: var(--agentforce-radius-md);
    box-shadow: var(--agentforce-shadow-sm);
    border: none;
    background: white;
    transition: var(--agentforce-transition);
  }
  
  .af-card:hover {
    box-shadow: var(--agentforce-shadow-md);
  }
  
  /* Buttons */
  .af-button {
    border-radius: var(--agentforce-radius-lg);
    transition: var(--agentforce-transition);
  }
  
  .af-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--agentforce-shadow-sm);
  }
  
  /* Inputs */
  .af-input {
    border-radius: var(--agentforce-radius-sm);
    border-color: #e2e8f0;
    box-shadow: none;
  }


  /* Override SLDS variables */
 :root {
    --slds-c-button-radius-border: 4px;
    --slds-c-card-radius-border: var(--agentforce-radius-md);
    --slds-c-input-radius-border: var(--agentforce-radius-sm);
  }
  
  /* Apply custom styles to SLDS components */

  .slds-card .slds-card,
  .slds-modal__content .slds-card{
    border-radius: unset !important;
    box-shadow: unset !important;
    border: none !important;
  }

  .slds-card,
  .slds-card .slds-card.slds-card_boundary{
    border-radius: var(--agentforce-radius-md) !important;
    box-shadow: var(--agentforce-shadow-sm) !important;
    border: none !important;
  }

  

  .slds-card__footer{
    border-top:unset !important;
  }


  .slds-button_brand:not(:disabled) {
    background: var(--agentforce-primary) !important;
  }


  /* Override main CSS */

  .home {
    background: linear-gradient(180deg, var(--agentforce-gradient-start), var(--agentforce-gradient-end)) !important;
  }

  /* Empty illustration styling */
  .illustration-empty {
    --slds-c-icon-color-foreground: rgba(89, 63, 219, 0.3); /* Faded purple using your brand color */
    --slds-c-icon-color-background: rgba(89, 63, 219, 0.05); /* Very light purple background */
  }

 /* Custom switcher toggle button */
  .custom-switcher {
    display: inline-flex;
    background: #BEC7F6;
    border-radius: 10px;
    gap: 4px;
    height: 38px;
}

.custom-switcher button {
    font-size: 14px;
    font-weight: 500;
    border: none;
    background: transparent;
    color: #1F0974;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    height: 38px;
    min-width: 70px;
}

.custom-switcher button:last-child{
    border-radius: 0 0.5rem 0.5rem 0;
    padding-right: 1rem;
}

.custom-switcher button:first-child{
    border-radius: 0.5rem 0 0 0.5rem;
    padding-left: 1rem;
}

.custom-switcher button.active {
    background: white;
    color: #1F0974;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Project Cards */
.project-card,
.agent-card,
.item-card{
    background: rgba(255, 255, 255, 0.7);
    border-radius: 20px !important; /*var(--agentforce-radius-lg) !important;*/
    transition: var(--agentforce-transition);
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.project-card:hover,
.agent-card:hover,
.item-card:hover{
    background: rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-2px);
    box-shadow: var(--agentforce-shadow-md) !important;
}

.project-card .slds-welcome-mat__tile-icon-container,
.agent-card .slds-welcome-mat__tile-icon-container,
.item-card .slds-welcome-mat__tile-icon-container{
    background: var(--agentforce-primary-light);
    border-radius: var(--agentforce-radius-md);
    padding: 0.75rem;
}

.project-card .slds-welcome-mat__tile-title,
.agent-card .slds-welcome-mat__tile-title,
.item-card .slds-welcome-mat__tile-title{
    color: var(--agentforce-primary);
    font-weight: 500;
}

.einstein-generate-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--agentforce-primary);
    color: white;
    border: none;
    border-radius: var(--agentforce-radius-lg);
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: var(--agentforce-transition);
    box-shadow: var(--agentforce-shadow-sm);
}

.einstein-generate-button:hover {
    transform: translateY(-1px);
    box-shadow: var(--agentforce-shadow-md);
    background: rgba(89, 63, 219, 0.9); /* Slightly lighter version of --agentforce-primary */
}

.einstein-generate-button:active {
    transform: translateY(0);
}

.einstein-generate-button .slds-button__icon {
    --slds-c-icon-color-foreground: white;
    --slds-c-icon-color-foreground-default: white;
}

/* Modal styling */
.einstein-generate-modal {
    border-radius: var(--agentforce-radius-lg) !important;
    box-shadow: var(--agentforce-shadow-md) !important;
}

.slds-modal__header {
    border-radius: var(--agentforce-radius-lg) var(--agentforce-radius-lg) 0 0 !important;
    border-bottom: 1px solid rgba(89, 63, 219, 0.1);
} /** Conflicts with the modal base. To take into consideration. Avoid using the header */

lightning-modal-body > .slds-modal__content{
  border-radius: var(--agentforce-radius-lg) var(--agentforce-radius-lg) 0 0!important;
}

.slds-modal__footer {
    border-radius: 0 0 var(--agentforce-radius-lg) var(--agentforce-radius-lg) !important;
    border-top: 1px solid rgba(89, 63, 219, 0.1);
}

/** Modal Styling - Custom Einstein Modal **/

lightning-modal[title="einstein-modal"] .slds-modal__content{
  padding: 0 !important;
  border-radius: 25px !important;
  background: transparent !important;
}

/* Help text styling */
.einstein-generate-helptext {
    color: rgba(89, 63, 219, 0.7);
    font-size: 0.875rem;
}

.slds-card__header-title {
  /*color: #1F0974;*/
}


/** Catalogue pagination */
.slds-button-group-list li:first-child .slds-button, 
.slds-button-group .slds-button:first-child {
  border-radius: .50rem 0 0 .50rem ;
}

.slds-button-group .slds-button:last-child{
  border-radius: 0 .50rem .50rem 0 ;
}

.slds-width-500{
  width: 500px;
}
.slds-font-weight-500{
  font-weight: 500;
}


/** Item card */

.item-card {
  display: flex;
  flex-direction: column;
  width: 260px; /* Reduced by 20% from 325px */
  height: 218px; /* Reduced by 20% from 272px */
  align-items: flex-start;
  justify-content: space-between;
  padding: 15px;
  position: relative;
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid transparent;
}

.item-card .content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.item-card .frame {
  display: inline-flex;
  justify-content: center;
  gap: 10px;
  padding: 3px 8px;
  background-color: var(--agentforce-primary);
  border-radius: 30px;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.item-card .text-wrapper {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "SF Pro-Semibold", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: small;
  font-weight: 500;
  letter-spacing: 0;
  /*line-height: 14px;*/
  white-space: nowrap;
}

.item-card .item-title {
  position: relative;
  align-self: stretch;
  font-family: var(--titles-font-scale-4-semibold-font-family);
  font-weight: var(--titles-font-scale-4-semibold-font-weight);
  color: #000000;
  font-size: large;
  letter-spacing: var(--titles-font-scale-4-semibold-letter-spacing);
  line-height: var(--titles-font-scale-4-semibold-line-height);
  font-style: var(--titles-font-scale-4-semibold-font-style);
}

.item-card .item-description {
  position: relative;
  align-self: stretch;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: var(--styling-hooks-color-on-surface-2-neutral-20);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 19px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* number of lines to show */
  -webkit-box-orient: vertical;
}

.item-card .frame-2 {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-self: stretch;
  width: 100%;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.item-card .p {
  position: relative;
  flex: 1;
  font-family: "SF Pro-Regular", Helvetica;
  font-weight: 400;
  color: var(--styling-hooks-color-on-surface-1-neutral-40);
  font-size: 11px;
  letter-spacing: 0;
  line-height: 14px;
}

.item-card .frame-3 {
  display: inline-flex;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.item-card .profile,
.item-card .profile-2,
.item-card .profile-3,
.item-card .profile-4 {
  position: relative;
  width: 25.45px;
  height: 25.45px;
  border-radius: 15.52px;
  border: 1px solid #ffffff;
  background-size: cover;
  background-position: 50% 50%;
  overflow: hidden;
}

.item-card .item-header{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/** QUILL EDITOR */
.ql-editor{
  line-height: 22px;
  font-weight: 400;
  font-size: 16px;
  font-family: 'Salesforce Sans', Arial, sans-serif;
}

/** new cards */
.slds-is-new{
    background-color: #d8e6fe42;
}

/** Progress bar **/
.slds-progress-bar__value{
  background-color: var(--agentforce-primary) !important;
}