/* TdkCard. Plain CSS, like shell.css, so server-rendered pages can use .tdk-card too. */

.tdk-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--tdk-panel-bg);
  border: 1px solid var(--tdk-panel-border);
  border-radius: var(--tdk-radius-md);
  box-shadow: var(--tdk-shadow-sm), var(--tdk-panel-highlight);
  -webkit-backdrop-filter: var(--tdk-panel-blur);
  backdrop-filter: var(--tdk-panel-blur);
}

.tdk-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--tdk-space-3);
  padding: var(--tdk-space-4) var(--tdk-space-5) 0;
}

.tdk-card__titles {
  min-width: 0;
}

.tdk-card__title {
  margin: 0;
  font-size: var(--tdk-text-md);
  font-weight: var(--tdk-weight-semibold);
}

.tdk-card__subtitle {
  margin: var(--tdk-space-1) 0 0;
  font-size: var(--tdk-text-sm);
  color: var(--tdk-color-text-secondary);
}

.tdk-card__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--tdk-space-1);
}

.tdk-card__body {
  flex: 1;
  min-width: 0;
  padding: var(--tdk-space-4) var(--tdk-space-5) var(--tdk-space-5);
}

.tdk-card--flush > .tdk-card__body {
  padding: 0;
}

.tdk-card__footer {
  padding: var(--tdk-space-3) var(--tdk-space-5);
  border-top: 1px solid var(--tdk-color-border-subtle);
  font-size: var(--tdk-text-sm);
  color: var(--tdk-color-text-secondary);
}