/* Styling the PrimeNG Card component */
:host ::ng-deep .p-card {
  background-color: #2d3748; /* Equivalent to bg-gray-800 */
  border: 2px solid var(--primary-color); /* Equivalent to border-red-800 */
  color: #f7fafc; /* Equivalent to text-gray-100 */
}

.p-card-header {
  font-weight: bold;
  color: #f56565; /* Equivalent to text-red-500 */
  padding: 4rem;
}

.p-card-body {
  padding: 1rem;
}

.p-card-footer {
  text-align: right;
  padding: 0.5rem;
  border-top: 1px solid #4a5568; /* Add top border to separate footer */
}
:host ::ng-deep.p-multiselect-header{
  background-color: #1e293b; /* Dark background color */
  border: 1px solid #822727; /* Equivalent to border-red-800 */
  border-top: none;
  border-bottom:none;
  color: black;
  padding: 0.5rem;
  border-top-right-radius:0.375rem;
  border-top-left-radius:0.375rem;

}
/* Style the outer container of the p-multiSelect */
:host ::ng-deep.p-multiselect {
  background-color: #1e293b; /* Dark background color */
  color: var(--text-color); /* Equivalent to /
  border: 1px solid var(--primary-color); /* Equivalent to border-red-800 */
  padding: 0.5rem;
  border-radius: 0.375rem; /* Rounded corners */
}

/* Style the label container */
:host ::ng-deep .p-multiselect-label-container {
  color: #e2e8f0; /* Light text color */
  font-weight: 500;
}

/* Style the dropdown panel */
:host ::ng-deep.p-multiselect-panel ::ng-deep{
  background-color: #111827; /* Dark background for dropdown */
  border: 1px solid var(--primary-color); /* Equivalent to border-red-800 */
}

/* Style each item in the dropdown */
:host ::ng-deep.p-multiselect-item ::ng-deep{
  padding: 0.5rem;
  color: #f9fafb; /* Light text color */
}
:host ::ng-deep.p-multiselect-item.p-focus {
  background-color: #1e293b; /* Dark background for focused item */
}
:host ::ng-deep.p-multiselect-item.p-highlight {
  background-color: #2d3748; /* Dark background for highlighted item */
}
:host ::ng-deep.p-multiselect-filter{
  background-color: #1e293b; /* Dark background for filter input */
  border: 1px solid var(--primary-color); /* Equivalent to border-red-800 */
  color: #e2e8f0; /* Light text color */
  padding: 0.5rem;
  border-radius: 0.375rem; /* Rounded corners */
}
/* Style tokens (selected values) */
:host ::ng-deep.p-multiselect-token {
  background-color: var(--primary-color); /* Blue background for tokens */
  color: white;
  border-radius: 0.25rem;
  padding: 0.2rem 0.4rem;
  margin-right: 0.25rem;
}


/* Style the dropdown arrow (trigger) */
:host ::ng-deep.p-multiselect-trigger {
  background-color: #374151;
  border-left: 1px solid #475569;
  padding: 0.5rem;
}

