/* General Card Styles */
.card {
  position: relative;
  background-color: var(--foreground, #fff);
  padding: 0rem;
  border-radius: 25px;
  display: flex;
  color: var(--bold, #333);
  box-shadow: 0 0 20px #0000000a;
  /* overflow: hidden; */
  justify-content: space-between;
}

/* Radial Gradient Border Effect */
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  background: radial-gradient(circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
      rgba(var(--color-rgb, 255, 255, 255), 1),
      rgba(0, 0, 0, 0) 70%);
  z-index: 0;
  pointer-events: none;
  transition: background 0.1s ease-in-out;
}

/* State-Specific Radial Gradient Borders */
.card.success::before {
  background: radial-gradient(circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
      rgba(var(--success-rgb, 157, 223, 158), 1),
      rgba(0, 0, 0, 0) 70%);
}

.card.error::before {
  background: radial-gradient(circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
      rgba(var(--error-rgb, 242, 155, 158),1),
      rgba(0, 0, 0, 0) 70%);
}

.card.warning::before {
  background: radial-gradient(circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
      rgba(var(--warning-rgb, 248, 218, 133), 1),
      rgba(0, 0, 0, 0) 70%);
}

.card.white::before {
  background: radial-gradient(circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
      rgba(var(--white-rgb, 255, 255, 255), 1),
      rgba(0, 0, 0, 0) 70%);
}

.card.black::before {
  background: radial-gradient(circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
      rgba(var(--black-rgb, 0, 0, 0), 1),
      rgba(0, 0, 0, 0) 70%);
}

.card.question::before {
  background: radial-gradient(circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
      rgba(var(--question-color-rgb, 255, 255, 255), 1),
      rgba(0, 0, 0, 0) 70%);
}

.card.odd::before {
  background: radial-gradient(circle at var(--gradient-x, 50%) var(--gradient-y, 50%),
      rgba(var(--odd-color-rgb, 0, 0, 0), 1),
      rgba(0, 0, 0, 0) 70%);
}
 
/* Card Content to Sit Above the Border */
.card>* {
  position: relative;
  z-index: 1;
  /* Ensure content is above the pseudo-element */
}

/* Card Header */
.card-header {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color, #007bff);
  transition: color 0.3s ease-in-out;
  border: none !important;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  align-content: center;
}

.card-container {
  margin: 1px;
  padding: 1rem;
  height: 100%;
  border-radius: 23px;
  background-color: rgba(var(--foreground-rgb), 0.95);
}

.card-container-prog {
  margin: 1px;
  padding: 1rem;
  border-radius: 23px;
  height: 100%;
  background-color: rgba(var(--foreground-rgb), 0.95);
}

/* Card Content */
.card-content {
  font-size: 1rem;
  color: var(--accent, #555);
  padding: 1rem;
}

/* Card Footer */
.card-footer {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--accent, #777);
  border: none !important;
  text-align: right;
}

/* State Variants */
.card.error .card-header {
  color: var(--error-color, red);
}

.card.success .card-header {
  color: var(--success-color, green);
}

.card.warning .card-header {
  color: var(--warning-color, orange);
}

.card.white .card-header {
  color: var(--white-color, #fff);
}

.card.black .card-header {
  color: var(--black-color, #000);
}

.card.question .card-header {
  color: var(--question-color, #a200ff);
}

.card.odd .card-header {
  color: var(--odd-color, #2b00ff);
}

/* State Variants */
.card .card-color {
  color: var(--color);
}

.card.error .card-color {
  color: var(--error-color, red);
}

.card.success .card-color {
  color: var(--success-color, green);
}

.card.warning .card-color {
  color: var(--warning-color, orange);
}

.card.white .card-color {
  color: var(--white-color, #fff);
}

.card.black .card-color {
  color: var(--black-color, #000);
}

.card.question .card-color {
  color: var(--question-color, #a200ff);
}

.card.odd .card-color {
  color: var(--odd-color, #2b00ff);
}

.special-badge {
  padding: 0.5rem 2rem;
  border-radius: 25px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  color: var(--background);
  font-weight: bold;
  font-size: 1rem;
  width: fit-content;
}


/* State Variants */
.card .special-badge {
  background: var(--color);
}

.card.white .special-badge {
  background: var(--white-color, #fff) !important;
}

.card.error .special-badge {
  background: var(--error-color, red) !important;
}

.card.success .special-badge {
  background: var(--success-color, green) !important;
}

.card.warning .special-badge {
  background: var(--warning-color, orange) !important;
}

.card.black .special-badge {
  background: var(--black-color, #000) !important;
}

.card.question .special-badge {
  background: var(--question-color, #a200ff) !important;
}

.card.odd .special-badge {
  background: var(--odd-color, #2b00ff) !important;
}

.white.special-badge {
  background: var(--white-color, #fff) !important;
}

.error.special-badge {
  background: var(--error-color, red) !important;
}

.success.special-badge {
  background: var(--success-color, green) !important;
}

.warning.special-badge {
  background: var(--warning-color, orange) !important;
}


.black.special-badge {
  background: var(--black-color, #000) !important;
}

.question.special-badge {
  background: var(--question-color, #a200ff) !important;
}

.odd.special-badge {
  background: var(--odd-color, #2b00ff) !important;
}

.special-badge {
  background: var(--color) !important;
}

.full-card {
  width: 100%;
}

.footer-right {
  display: flex;
  flex-direction: row-reverse;
  align-content: center;
  align-items: center;
}

.table-card {
  padding: 1px;
}

.table-card .card-content {
  padding: 0;
}


/* BLOCK OTHER STYLES */
.card-header {
  background-color: initial;
}

.card-footer {
  background-color: initial;
}