:root {
  /* Variables are dynamically defined by JavaScript code */
  --primary-color-hover: rgba(0, 0, 0, 0.6);
  --primary-color-active: rgba(0, 0, 0, 0.4);
  --primary-color-light: rgba(0, 0, 0, 0.1);
  --secondary-color: #03A9F4;
  --success-color: #4CAF50;
  --warning-color: #FFC107;
  --danger-color: #F44336;
  --info-color: #00BCD4;
  --text-white: #ffffff;
}

body {
  font-family: "Inter", sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.sidebar-header .p-button.p-button-text .p-button-icon {
  color: var(--text-white) !important;
}

/* Global styles for buttons */
.p-button {
  border-radius: 0.25rem !important;
}

.p-button {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.p-button-success {
  background-color: var(--success-color) !important;
  border-color: var(--success-color) !important;
}

.p-button-warning {
  background-color: var(--warning-color) !important;
  border-color: var(--warning-color) !important;
}

.p-button-danger {
  background-color: var(--danger-color) !important;
  border-color: var(--danger-color) !important;
}

.p-button-info {
  background-color: var(--info-color) !important;
  border-color: var(--info-color) !important;
}

.p-button.p-button-success:hover,
.p-button.p-button-primary:hover {
  opacity: 0.8 !important;
}

/* Style for outlined buttons */
.p-button.p-button-outlined {
  color: var(--text-white) !important;
  border-color: var(--primary-color) !important;
  background-color: var(--primary-color-light) !important;
}

.p-button.p-button-outlined:hover {
  background-color: var(--primary-color-hover) !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 1px var(--primary-color) !important;
}

.p-button.p-button-outlined:focus {
  box-shadow: 0 0 0 2px var(--surface-0),
    0 0 0 4px var(--primary-color-light) !important;
}

.p-button.p-button-text {
  color: var(--primary-color) !important;
}

.p-button.p-button-text:not(.p-button-secondary):not(.p-button-danger):hover {
  background-color: var(--primary-color-light) !important;
  color: var(--primary-color) !important;
}

/* Tags */
.p-tag {
  background-color: var(--primary-color) !important;
}
.p-tag-label,
.p-tag-icon {
  color: white !important;
}
.p-tag-warn {
  background-color: var(--warning-color) !important;
}
.p-tag-danger {
  background-color: var(--danger-color) !important;
}

/* Badges */
.p-badge {
  color: white !important;
}

/* ProgressBar */
.p-progressbar-value {
  background-color: var(--primary-color) !important;
}


/* Styles pour tous les champs de saisie */
.p-inputtext,
.p-autocomplete-input,
.p-inputnumber-input,
.p-dropdown,
.p-multiselect {
  padding: 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid var(--surface-border) !important;
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: var(--font-family);
  background-color: #f0f0f0 !important;
}

body .p-inputtext,
body .p-autocomplete .p-autocomplete-input,
body .p-inputnumber .p-inputnumber-input,
body .p-dropdown,
body .p-multiselect,
html .p-inputtext,
html .p-autocomplete .p-autocomplete-input,
html .p-inputnumber .p-inputnumber-input,
html .p-dropdown,
html .p-multiselect {
  background-color: #f0f0f0 !important;
}

/* Dark mode */
body[data-theme="dark"] .p-inputtext,
body[data-theme="dark"] .p-autocomplete .p-autocomplete-input,
body[data-theme="dark"] .p-inputnumber .p-inputnumber-input,
body[data-theme="dark"] .p-dropdown,
body[data-theme="dark"] .p-multiselect {
  background-color: #2a2a2a !important;
}

.p-inputtext:hover,
.p-autocomplete-input:hover,
.p-inputnumber-input:hover,
.p-dropdown:hover,
.p-multiselect:hover {
  border-color: var(--primary-color) !important;
}

.p-inputtext:focus,
.p-autocomplete-input:focus,
.p-inputnumber-input:focus,
.p-dropdown.p-focus,
.p-multiselect.p-focus,
.p-inputtext.p-focus
{
  outline: 0 none;
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 2px var(--p-inputtext-border-color) !important
}

/* Additional styles for input fields */
.p-calendar .p-inputtext,
.p-inputtextarea,
.p-password .p-inputtext,
.p-chips .p-inputtext,
.p-dropdown .p-dropdown-label,
.p-autocomplete .p-autocomplete-input,
.p-multiselect .p-multiselect-label,
.p-treeselect .p-treeselect-label {
  background-color: #f0f0f0 !important;
  color: var(--text-color) !important;
}

/* Dark mode for specific types */
body[data-theme="dark"] .p-calendar .p-inputtext,
body[data-theme="dark"] .p-inputtextarea,
body[data-theme="dark"] .p-password .p-inputtext,
body[data-theme="dark"] .p-chips .p-inputtext,
body[data-theme="dark"] .p-dropdown .p-dropdown-label,
body[data-theme="dark"] .p-autocomplete .p-autocomplete-input,
body[data-theme="dark"] .p-multiselect .p-multiselect-label,
body[data-theme="dark"] .p-treeselect .p-treeselect-label {
  background-color: #2a2a2a !important;
}

/* Styles for number/price inputs with reduced width */
.input-price,
.input-stock,
.w-6rem {
  max-width: 90px !important;
  width: 90px !important;
  min-width: 90px !important;
  flex: 0 0 90px !important;
}

.input-price .p-inputnumber-input,
.input-stock .p-inputnumber-input {
  text-align: right;
  padding-right: 8px;
  font-size: 0.95rem;
}

.vip-store-admin-page {
  .p-datatable .p-datatable-thead > tr > th {
    background-color: var(--surface-100);
    font-weight: 600;
  }

  .p-datatable .p-datatable-thead > tr > th.text-center > .p-datatable-column-header-content {
    display: flex;
    justify-content: center;
  }
  .p-datatable .p-datatable-thead > tr > th.text-right > .p-datatable-column-header-content {
    display: flex;
    justify-content: end;
  }
}

/* Style for pagination pages in dark mode */
.vip-store-admin-page body[data-theme="dark"] .p-paginator .p-paginator-first,
.vip-store-admin-page body[data-theme="dark"] .p-paginator .p-paginator-prev,
.vip-store-admin-page body[data-theme="dark"] .p-paginator .p-paginator-next,
.vip-store-admin-page body[data-theme="dark"] .p-paginator .p-paginator-last,
.vip-store-admin-page html[data-theme="dark"] .p-paginator .p-paginator-first,
.vip-store-admin-page html[data-theme="dark"] .p-paginator .p-paginator-prev,
.vip-store-admin-page html[data-theme="dark"] .p-paginator .p-paginator-next,
.vip-store-admin-page html[data-theme="dark"] .p-paginator .p-paginator-last,
#app body[data-theme="dark"] .p-paginator .p-paginator-first,
#app body[data-theme="dark"] .p-paginator .p-paginator-prev,
#app body[data-theme="dark"] .p-paginator .p-paginator-next,
#app body[data-theme="dark"] .p-paginator .p-paginator-last,
#app html[data-theme="dark"] .p-paginator .p-paginator-first,
#app html[data-theme="dark"] .p-paginator .p-paginator-prev,
#app html[data-theme="dark"] .p-paginator .p-paginator-next,
#app html[data-theme="dark"] .p-paginator .p-paginator-last {
  color: #e0e0e0 !important;
}

.vip-store-admin-page body[data-theme="dark"] .p-paginator .p-paginator-first:hover,
.vip-store-admin-page body[data-theme="dark"] .p-paginator .p-paginator-prev:hover,
.vip-store-admin-page body[data-theme="dark"] .p-paginator .p-paginator-next:hover,
.vip-store-admin-page body[data-theme="dark"] .p-paginator .p-paginator-last:hover,
.vip-store-admin-page html[data-theme="dark"] .p-paginator .p-paginator-first:hover,
.vip-store-admin-page html[data-theme="dark"] .p-paginator .p-paginator-prev:hover,
.vip-store-admin-page html[data-theme="dark"] .p-paginator .p-paginator-next:hover,
.vip-store-admin-page html[data-theme="dark"] .p-paginator .p-paginator-last:hover,
#app body[data-theme="dark"] .p-paginator .p-paginator-first:hover,
#app body[data-theme="dark"] .p-paginator .p-paginator-prev:hover,
#app body[data-theme="dark"] .p-paginator .p-paginator-next:hover,
#app body[data-theme="dark"] .p-paginator .p-paginator-last:hover,
#app html[data-theme="dark"] .p-paginator .p-paginator-first:hover,
#app html[data-theme="dark"] .p-paginator .p-paginator-prev:hover,
#app html[data-theme="dark"] .p-paginator .p-paginator-next:hover,
#app html[data-theme="dark"] .p-paginator .p-paginator-last:hover {
  background-color: #333333 !important;
}

/* More specific styles for sidebar menu */
.vip-store-admin-page .sidebar-menu :deep(.p-menuitem) .p-menuitem-link:hover,
#app .sidebar-menu :deep(.p-menuitem) .p-menuitem-link:hover {
  background-color: var(--surface-hover);
}

.vip-store-admin-page body[data-theme="dark"] .sidebar-menu :deep(.p-menuitem) .p-menuitem-link:hover,
.vip-store-admin-page html[data-theme="dark"] .sidebar-menu :deep(.p-menuitem) .p-menuitem-link:hover,
#app body[data-theme="dark"] .sidebar-menu :deep(.p-menuitem) .p-menuitem-link:hover,
#app html[data-theme="dark"] .sidebar-menu :deep(.p-menuitem) .p-menuitem-link:hover {
  background-color: #3e3e3e !important;
  color: white !important;
}

.vip-store-admin-page body[data-theme="dark"] .sidebar :deep(.active-link),
.vip-store-admin-page html[data-theme="dark"] .sidebar :deep(.active-link),
#app body[data-theme="dark"] .sidebar :deep(.active-link),
#app html[data-theme="dark"] .sidebar :deep(.active-link) {
  background-color: var(--primary-color) !important;
  color: white !important;
}

/* Specific style for targeting sidebar menus */
.vip-store-admin-page body[data-theme="dark"] .sidebar .p-menu-item:not(.p-disabled) .p-menu-item-content:hover,
.vip-store-admin-page html[data-theme="dark"] .sidebar .p-menu-item:not(.p-disabled) .p-menu-item-content:hover,
#app body[data-theme="dark"] .sidebar .p-menu-item:not(.p-disabled) .p-menu-item-content:hover,
#app html[data-theme="dark"] .sidebar .p-menu-item:not(.p-disabled) .p-menu-item-content:hover {
  background: #3e3e3e !important;
  color: white !important;
}

/* Global Progress bar styles */
.p-progressbar-label {
  color: var(--p-primary-contrast-color) !important;
}

.progress-low .p-progressbar-value {
  background-color: var(--p-green-500) !important; /* Green for low usage */
}
.progress-low {
  color: var(--p-green-500) !important;
}

.progress-medium .p-progressbar-value {
  background-color: var(--p-orange-500) !important; /* Orange for medium usage */
}
.progress-medium {
  color: var(--p-orange-500) !important;
}

.progress-high .p-progressbar-value {
  background-color: var(--p-red-500) !important; /* Red for high usage */
}
.progress-high {
  color: var(--p-red-500) !important;
}



/* VIP Status icon color */
.p-tag-icon.pi-crown {
  color: var(--p-orange-500) !important;
}

body[data-theme="dark"] .p-tag-icon.pi-crown {
  color: var(--p-stone-950) !important;
}

body[data-theme="dark"] .p-progressbar {
  background: #636364 !important;
}



/* Style for drawers */
.p-drawer {
  .p-drawer-header {
    background-color: var(--surface-card) !important;
    color: var(--text-color) !important;
    border-bottom: 1px solid var(--surface-border) !important;
  }

  .p-drawer-content {
    background-color: var(--surface-card) !important;
    color: var(--text-color) !important;
  }

  /* Dark mode specific styles */
  [data-theme="dark"] & {
    .p-inputtext,
    .p-dropdown,
    .p-autocomplete-input {
      background-color: var(--surface-800) !important;
      border-color: var(--surface-700) !important;
      color: var(--surface-0) !important;

      &:enabled:focus {
        background-color: var(--surface-700) !important;
        border-color: var(--primary-color) !important;
      }

      &:hover:not(:disabled) {
        border-color: var(--primary-color) !important;
      }
    }

    .p-dropdown-panel {
      background-color: var(--surface-800) !important;
      border-color: var(--surface-700) !important;

      .p-dropdown-item {
        color: var(--surface-0);

        &:hover {
          background-color: var(--surface-700) !important;
        }
      }
    }
  }
}

/* Style pour indiquer les fonctionnalités premium dans le menu */
.is-premium-menu {
  position: relative;
  color: var(--primary-color) !important;
}
.is-premium-menu.text-white {
  color: var(--text-white) !important;
}

.is-premium-menu::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 8px;
  height: 8px;
  /*background: linear-gradient(135deg, var(--warning-color) 0%, var(--danger-color) 100%);*/
  background: var(--warning-color);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 193, 7, 0.6);
}

/* Style spécifique pour le hover sur élément premium */
.sidebar-menu :deep(.p-menuitem) .p-menuitem-link:hover .is-premium-menu {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

body[data-theme="dark"] .is-premium-menu {
  color: var(--warning-color) !important;
}

body[data-theme="dark"] .is-premium-menu::after {
  background: linear-gradient(135deg, var(--warning-color) 0%, var(--danger-color) 100%);
  box-shadow: 0 0 4px rgba(255, 193, 7, 0.6);
}

/* Styles globaux pour les boutons */
.p-button:not(.p-button-text):hover .p-button-icon {
  color: inherit !important;
}

/* Dark mode styles */
[data-theme="dark"] .p-datatable .p-datatable-tbody > tr.p-row-odd {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

[data-theme="dark"] .p-paginator {
  background-color: var(--surface-card) !important;
}

[data-theme="dark"] .p-paginator .p-paginator-element {
  color: var(--text-color) !important;
}

/* Improvements for buttons with icons */
.p-button.p-button-text:hover {
  background-color: var(--surface-hover);
}

.p-button.p-button-text.p-button-success:hover .p-button-icon,
.p-button.p-button-text.p-button-success.p-button-outlined:hover .p-button-icon {
  color: var(--p-green-500) !important;
}

.p-button.p-button-text.p-button-secondary:hover .p-button-icon,
.p-button.p-button-text.p-button-secondary.p-button-outlined:hover .p-button-icon {
  color: var(--secondary-color) !important;
}

/* Progress bar styles */
:deep(.progress-low) {
  background-color: var(--green-100) !important;
}

:deep(.progress-low .p-progressbar-value) {
  background-color: var(--green-500) !important;
}

:deep(.progress-medium) {
  background-color: var(--orange-100) !important;
}

:deep(.progress-medium .p-progressbar-value) {
  background-color: var(--orange-500) !important;
}

:deep(.progress-high) {
  background-color: var(--red-100) !important;
}

:deep(.progress-high .p-progressbar-value) {
  background-color: var(--red-500) !important;
}

/* Text colors for progress indicators */
.text-progress-low {
  color: var(--green-500) !important;
}

.text-progress-medium {
  color: var(--orange-500) !important;
}

.text-progress-high {
  color: var(--red-500) !important;
}