/**
 * Color Utility Classes
 *
 * Pre-built utility classes for common color patterns.
 * These replace inline styles throughout templates.
 */

/* ===== BACKGROUND GRADIENTS ===== */
/* Primary Gradients */
.bg-gradient-primary {
  background: linear-gradient(60deg, var(--gradient-primary-start), var(--gradient-primary-end)) !important;
}

.bg-gradient-primary-bottom-left {
  background: linear-gradient(to bottom left, var(--gradient-primary-start), var(--gradient-primary-end)) !important;
}

/* Success Gradients */
.bg-gradient-success {
  background: linear-gradient(60deg, var(--gradient-success-start), var(--gradient-success-end)) !important;
}

.bg-gradient-success-bottom-left {
  background: linear-gradient(to bottom left, var(--gradient-success-start), var(--gradient-success-end)) !important;
}

/* Info Gradients */
.bg-gradient-info {
  background: linear-gradient(60deg, var(--gradient-info-start), var(--gradient-info-end)) !important;
}

.bg-gradient-info-bottom-left {
  background: linear-gradient(to bottom left, var(--gradient-info-start), var(--gradient-info-end)) !important;
}

/* Danger Gradients */
.bg-gradient-danger {
  background: linear-gradient(60deg, var(--gradient-danger-start), var(--gradient-danger-end)) !important;
}

.bg-gradient-danger-bottom-left {
  background: linear-gradient(to bottom left, var(--gradient-danger-start), var(--gradient-danger-end)) !important;
}

/* Warning Gradients */
.bg-gradient-warning {
  background: linear-gradient(60deg, var(--gradient-warning-start), var(--gradient-warning-end)) !important;
}

/* ===== SOLID BACKGROUNDS ===== */
.bg-primary {
  background-color: var(--color-primary) !important;
}

.bg-success {
  background-color: var(--color-success) !important;
}

.bg-info {
  background-color: var(--color-info) !important;
}

.bg-warning {
  background-color: var(--color-warning) !important;
}

.bg-danger {
  background-color: var(--color-danger) !important;
}

.bg-dark-card {
  background: var(--card-bg-dark) !important;
}

/* ===== TEXT COLORS ===== */
.text-primary {
  color: var(--color-primary) !important;
}

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

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

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

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

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

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

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

/* ===== LINK COLORS ===== */
a.link-primary,
.link-primary {
  color: var(--color-link) !important;
}

a.link-primary:hover,
.link-primary:hover {
  color: var(--color-link-hover) !important;
}

a.link-info,
.link-info {
  color: var(--color-info) !important;
}

a.link-info:hover,
.link-info:hover {
  color: var(--color-info-light) !important;
}

/* ===== BORDER COLORS ===== */
.border-primary {
  border-color: var(--color-primary) !important;
}

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

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

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

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

/* ===== BOX SHADOWS ===== */
.shadow-primary {
  box-shadow: 0 5px 20px 0 var(--shadow-primary) !important;
}

.shadow-success {
  box-shadow: 0 5px 20px 0 var(--shadow-success) !important;
}

.shadow-info {
  box-shadow: 0 5px 20px 0 var(--shadow-info) !important;
}

.shadow-danger {
  box-shadow: 0 5px 20px 0 var(--shadow-danger) !important;
}

.shadow-warning {
  box-shadow: 0 5px 20px 0 var(--shadow-warning) !important;
}

/* ===== CARD UTILITIES ===== */
.card-header-gradient-primary {
  background: linear-gradient(60deg, var(--gradient-primary-start), var(--gradient-primary-end));
  border-radius: 8px;
  margin: -20px 20px 0;
  padding: 20px;
  position: relative;
  box-shadow: 0 5px 20px 0 var(--shadow-primary);
}

.card-header-gradient-info {
  background: linear-gradient(60deg, var(--gradient-info-start), var(--gradient-info-end));
  border-radius: 8px;
  margin: -20px 20px 0;
  padding: 20px;
  position: relative;
  box-shadow: 0 5px 20px 0 var(--shadow-info);
}

.card-header-gradient-danger {
  background: linear-gradient(60deg, var(--gradient-danger-start), var(--gradient-danger-end));
  border-radius: 8px;
  margin: -20px 20px 0;
  padding: 20px;
  position: relative;
  box-shadow: 0 5px 20px 0 var(--shadow-danger);
}

.card-header-gradient-warning {
  background: linear-gradient(60deg, var(--gradient-warning-start), var(--gradient-warning-end));
  border-radius: 8px;
  margin: -20px 20px 0;
  padding: 20px;
  position: relative;
  box-shadow: 0 5px 20px 0 var(--shadow-warning);
}

.card-header-gradient-success {
  background: linear-gradient(60deg, var(--gradient-success-start), var(--gradient-success-end));
  border-radius: 8px;
  margin: -20px 20px 0;
  padding: 20px;
  position: relative;
  box-shadow: 0 5px 20px 0 var(--shadow-success);
}

/* Dark card modifier: used in many authentication/login templates. */
.card.card-dark {
  background: var(--card-bg-dark) !important;
  color: var(--text-primary);
  box-shadow: var(--card-shadow) !important;
}

/* Utility alias for dark card backgrounds */
.card-dark {
  background: var(--card-bg-dark) !important;
}

/* ===== BADGE UTILITIES ===== */
.badge-success-custom {
  color: white;
  background-color: var(--badge-success-bg);
  padding: 3px 10px;
  border-radius: 3px;
}

.badge-danger-custom {
  color: white;
  background-color: var(--badge-danger-bg);
  padding: 3px 10px;
  border-radius: 3px;
}

.badge-warning-custom {
  color: var(--badge-warning-text);
  background-color: var(--badge-warning-bg);
  padding: 3px 10px;
  border-radius: 3px;
}

/* ===== BUTTON HOVER STATES ===== */
.btn-primary:hover {
  background-color: var(--btn-primary-hover) !important;
}

.btn-primary:active {
  background-color: var(--btn-primary-active) !important;
}

/* ===== BREADCRUMB UTILITIES ===== */
.breadcrumb-item a {
  color: var(--color-link);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* ===== OPACITY UTILITIES ===== */
.opacity-60 {
  opacity: var(--state-hover-opacity);
}

.opacity-40 {
  opacity: var(--state-disabled-opacity);
}