/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
*/

/* Brand Color Variables */
:root {
  --eudr-green: #44b44a;
  --eudr-green-hover: #3aa63a;
  --company-green: #198754;
  --company-green-hover: #157347;
  --admin-red: #dc3545;
  --admin-red-hover: #bb2d3b;
}

/* Card Hover Effects */
.hover-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.hover-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15) !important;
}

/* Navigation Sidebar */
.dashboard-nav {
  width: 275px;
  min-height: 100vh;
}

.dashboard-nav .nav-link {
  color: white;
  transition: color 0.2s;
}

.dashboard-nav .nav-link:not(.active):not(.logout-link):hover {
  color: var(--eudr-green-hover) !important;
  background-color: transparent !important;
}

.dashboard-nav .nav-link.active {
  background-color: var(--eudr-green);
  color: white !important;
  border-radius: 0.25rem;
}

.eudr_green {
  color: var(--eudr-green);
}

.btn-primary {
  background-color: var(--eudr-green) !important;
  border-color: var(--eudr-green) !important;
  color: white !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--eudr-green-hover) !important;
  border-color: var(--eudr-green-hover) !important;
  color: white !important;
}

/* Portal Color Utilities */
.text-company {
  color: var(--company-green) !important;
}

.text-consultant {
  color: var(--eudr-green) !important;
}

.text-admin {
  color: var(--admin-red) !important;
}

.btn-company {
  background-color: var(--company-green) !important;
  border-color: var(--company-green) !important;
  color: white !important;
}

.btn-company:hover,
.btn-company:focus {
  background-color: var(--company-green-hover) !important;
  border-color: var(--company-green-hover) !important;
  color: white !important;
}

.btn-consultant {
  background-color: var(--eudr-green) !important;
  border-color: var(--eudr-green) !important;
  color: white !important;
}

.btn-consultant:hover,
.btn-consultant:focus {
  background-color: var(--eudr-green-hover) !important;
  border-color: var(--eudr-green-hover) !important;
  color: white !important;
}

.btn-admin {
  background-color: var(--admin-red) !important;
  border-color: var(--admin-red) !important;
  color: white !important;
}

.btn-admin:hover,
.btn-admin:focus {
  background-color: var(--admin-red-hover) !important;
  border-color: var(--admin-red-hover) !important;
  color: white !important;
}

/* Pagination Styles */
.pagination .page-link {
  color: var(--eudr-green) !important;
  border-color: #dee2e6;
}

.pagination .page-link:hover {
  color: var(--eudr-green-hover) !important;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.pagination .page-item.active .page-link {
  background-color: var(--eudr-green) !important;
  border-color: var(--eudr-green) !important;
  color: white !important;
}

.pagination .page-item.disabled .page-link {
  color: #6c757d;
  background-color: #fff;
  border-color: #dee2e6;
}

/* Choices.js Styles - Only style selected items (tags), not dropdown options */
.choices__list--multiple .choices__item--selectable {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: white !important;
}

.choices__list--multiple .choices__item--selectable .choices__button {
  border-left-color: rgba(255, 255, 255, 0.3) !important;
}

.choices__list--multiple .choices__item--selectable .choices__button:hover,
.choices__list--multiple .choices__item--selectable .choices__button:focus {
  opacity: 0.8;
}