/*
  MFP Design System — Card
  Production CSS for card component with collapsible header.
  Import tokens.css before this file.
*/

/* ======================================================================
   CARD
   ====================================================================== */
.card {
  background: var(--color-white);
  box-shadow: var(--shadow-2);
  border-radius: var(--radius-default);
  overflow: hidden;
}

/* ======================================================================
   HEADER
   ====================================================================== */
.card__header {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  cursor: pointer;
  user-select: none;
  transition: background 100ms;
}

.card__header:hover {
  background: var(--color-pale-grey);
}

.card__header-start {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-width: 0;
}

.card__header-end {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-shrink: 0;
}

.card__header-icon {
  font-size: 24px;
  color: var(--color-action);
  flex-shrink: 0;
}

/* h5 from global.css handles .card__title typography */

.card__meta {
  font: var(--type-body-small);
  color: var(--color-dark-grey);
  white-space: nowrap;
}

.card__chevron {
  font-size: 24px;
  color: var(--color-darker-grey);
  transition: transform 200ms;
  flex-shrink: 0;
}

.card.is-open .card__chevron {
  transform: rotate(180deg);
}

/* ======================================================================
   HEADER GRADIENT VARIANTS
   Usage: add .card__header--gradient + a colour modifier.
   ====================================================================== */
.card__header--gradient {
  background: linear-gradient(90deg, var(--card-gradient-start) 0%, var(--color-white) 100%);
}

.card__header--gradient:hover {
  background: linear-gradient(90deg, var(--card-gradient-start) 0%, var(--color-pale-grey) 100%);
}

.card__header--gradient-green  { --card-gradient-start: var(--color-green-50); }
.card__header--gradient-blue   { --card-gradient-start: var(--color-blue-50); }
.card__header--gradient-purple { --card-gradient-start: var(--color-purple-50); }
.card__header--gradient-teal   { --card-gradient-start: var(--color-teal-100); }
.card__header--gradient-yellow { --card-gradient-start: var(--color-yellow-50); }
.card__header--gradient-red    { --card-gradient-start: var(--color-red-50); }

/* ======================================================================
   STATIC VARIANT — .card--static
   Body is always visible; header is not interactive.
   ====================================================================== */
.card--static .card__header {
  cursor: default;
}

.card--static .card__header:hover {
  background: none;
}

.card--static .card__body {
  display: block;
}

/* ======================================================================
   BODY
   ====================================================================== */
.card__body {
  display: none;
  padding: var(--space-16);
  border-top: 1px solid var(--color-light-grey);
  min-height: 80px;
}

.card.is-open .card__body {
  display: block;
}

/* ======================================================================
   FOOTER
   ====================================================================== */
.card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-top: 1px solid var(--color-light-grey);
}