/* ==========================================================================
   TaskFlow Theme Configuration
   ========================================================================== 
   
   INSTRUCTIONS:
   To change the entire application color scheme, modify the primary color
   values below. All components will automatically update.
   
   Current Theme: Pantone 348 Green (#00843D)
   Previous Theme: Blue (#1D71B8)
   ========================================================================== */

:root {
  /* ========================================================================
     PRIMARY COLORS - CHANGE THESE TO UPDATE THE THEME
     ======================================================================== */

  /* Main brand color (Pantone 348 Green) */
  --tf-primary: #00843D;

  /* Darker shade for hover states */
  --tf-primary-hover: #006B32;

  /* Even darker for active/pressed states */
  --tf-primary-active: #005528;

  /* Light variant for backgrounds */
  --tf-primary-light: #E8F5E9;

  /* Very light variant */
  --tf-primary-lighter: #F1F8E9;

  /* Dark variant for text on light backgrounds */
  --tf-primary-dark: #1B5E20;

  /* RGB values for rgba() usage */
  --tf-primary-rgb: 0, 132, 61;

  /* ========================================================================
     BOOTSTRAP OVERRIDES
     Estos valores sobrescriben las variables de Bootstrap
     ======================================================================== */

  --bs-primary: var(--tf-primary);
  --bs-primary-rgb: 0, 132, 61;
  --bs-link-color: var(--tf-primary);
  --bs-link-hover-color: var(--tf-primary-hover);

  /* ========================================================================
     SECONDARY COLORS (optional - add as needed)
     ======================================================================== */

  /* Keep these for reference or future use */
  --tf-secondary: #6c757d;
  --tf-success: #198754;
  --tf-danger: #dc3545;
  --tf-warning: #ffc107;
  --tf-info: #0dcaf0;
}

/* ==========================================================================
   Global Color Applications
   ========================================================================== */

/* Links */
a:not(.btn) {
  color: var(--tf-primary);
}

a:not(.btn):hover {
  color: var(--tf-primary-hover);
}

/* Bootstrap btn-primary override */
.btn-primary {
  --bs-btn-bg: var(--tf-primary);
  --bs-btn-border-color: var(--tf-primary);
  --bs-btn-hover-bg: var(--tf-primary-hover);
  --bs-btn-hover-border-color: var(--tf-primary-hover);
  --bs-btn-active-bg: var(--tf-primary-active);
  --bs-btn-active-border-color: var(--tf-primary-active);
  --bs-btn-disabled-bg: var(--tf-primary);
  --bs-btn-disabled-border-color: var(--tf-primary);
}

/* Bootstrap btn-outline-primary override */
.btn-outline-primary {
  --bs-btn-color: var(--tf-primary);
  --bs-btn-border-color: var(--tf-primary);
  --bs-btn-hover-bg: var(--tf-primary);
  --bs-btn-hover-border-color: var(--tf-primary);
  --bs-btn-active-bg: var(--tf-primary-hover);
  --bs-btn-active-border-color: var(--tf-primary-hover);
}

/* Form focus states */
.form-control:focus,
.form-select:focus {
  border-color: var(--tf-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--tf-primary-rgb), 0.25);
}

/* Form check inputs */
.form-check-input:checked {
  background-color: var(--tf-primary);
  border-color: var(--tf-primary);
}

/* Nav pills */
.nav-pills .nav-link.active {
  background-color: var(--tf-primary);
}

/* Progress bars */
.progress-bar {
  background-color: var(--tf-primary);
}

/* Pagination */
.page-link {
  color: var(--tf-primary);
}

.page-item.active .page-link {
  background-color: var(--tf-primary);
  border-color: var(--tf-primary);
}

/* Badges */
.badge.bg-primary {
  background-color: var(--tf-primary) !important;
}

/* Text utilities */
.text-primary {
  color: var(--tf-primary) !important;
}

/* Background utilities */
.bg-primary {
  background-color: var(--tf-primary) !important;
}

/* Border utilities */
.border-primary {
  border-color: var(--tf-primary) !important;
}

/* ==========================================================================
   TaskFlow Custom Classes
   ========================================================================== */

/* Modal headers with primary color */
.modal-header-primary {
  background-color: var(--tf-primary);
  color: white;
}

/* Card headers with primary color */
.card-header-primary {
  background-color: var(--tf-primary);
  color: white;
}

/* Table headers with primary color */
.thead-primary {
  background-color: var(--tf-primary);
  color: white;
}

/* Accent color for checkboxes, radio buttons */
.accent-primary {
  accent-color: var(--tf-primary);
}