/* ===== COMPOSANT CARD BEM ===== */
/* Système de cartes réutilisables selon méthodologie BEM */
/* Remplace les styles inline pour les boîtes/cartes dans les templates */

/* === BLOCK PRINCIPAL === */
.c-card {
  background: white;
  border-radius: var(--cb-border-radius-lg, 12px);
  padding: var(--cb-spacing-5, 20px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.c-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* === ELEMENTS === */
.c-card__header {
  margin-bottom: var(--cb-spacing-4, 16px);
  padding-bottom: var(--cb-spacing-4, 16px);
  border-bottom: 1px solid #e0e0e0;
}

.c-card__title {
  margin: 0;
  font-size: var(--cb-font-size-lg, 1.125rem);
  font-weight: var(--cb-font-weight-bold, 700);
  color: #3182ce;
}

.c-card__subtitle {
  margin: var(--cb-spacing-2, 8px) 0 0 0;
  font-size: var(--cb-font-size-sm, 0.875rem);
  color: var(--cb-text-secondary, #2d3748) !important;
}

.c-card__content {
  margin-bottom: var(--cb-spacing-4, 16px);
}

.c-card__footer {
  padding-top: var(--cb-spacing-4, 16px);
  border-top: 1px solid #e0e0e0;
  display: flex;
  gap: var(--cb-spacing-3, 12px);
  justify-content: flex-end;
}

/* === MODIFIERS - SIZES === */
.c-card--small {
  padding: var(--cb-spacing-3, 12px);
}

.c-card--large {
  padding: var(--cb-spacing-6, 24px);
}

/* === MODIFIERS - BORDERS === */
.c-card--bordered {
  border: 2px solid #e0e0e0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

/* Transition pour le titre */
.c-card__title {
  transition: color 0.2s ease;
}

/* Quand le bouton dans le footer est survolé, changer la couleur du titre */
.c-card--bordered:has(.c-card__footer .c-btn:hover) .c-card__title {
  color: #5ba3d9 !important;
}

/* Footer ancré en bas de la card */
.c-card--bordered .c-card__content {
  flex: 1;
}

.c-card--bordered .c-card__footer {
  margin-top: auto;
  border-top: none;
  padding-top: 0;
}

.c-card--bordered-danger {
  border: 2px solid var(--cb-danger, #dc3545);
  box-shadow: none;
}

.c-card--bordered-warning {
  border: 2px solid var(--cb-warning, #ffc107);
  box-shadow: none;
}

.c-card--bordered-success {
  border: 2px solid var(--cb-success, #28a745);
  box-shadow: none;
}

.c-card--bordered-info {
  border: 2px solid var(--cb-info, #17a2b8);
  box-shadow: none;
}

/* === MODIFIERS - BACKGROUND COLORS === */
.c-card--light {
  background-color: #f8f9fa;
}

.c-card--primary {
  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
  color: white;
}

.c-card--primary .c-card__title {
  color: white;
}

.c-card--primary .c-card__subtitle {
  color: rgba(255, 255, 255, 0.9);
}

/* === COLOR PICKER COMPONENT === */
.c-color-picker-container {
  display: flex;
  gap: var(--cb-spacing-2, 8px);
  flex-wrap: wrap;
}

.c-color-pill {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.c-color-pill:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.c-color-pill.selected {
  border: 3px solid var(--cb-primary, #1976d2);
  box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .c-card {
    padding: var(--cb-spacing-4, 16px);
  }

  .c-card__footer {
    flex-direction: column;
  }
}