/* Shared components: card, buttons, inputs, labels, icon buttons, button rows */

.card {
  background: var(--md-sys-color-surface);
  border: 1px solid rgba(35, 52, 59, 0.08);
  box-shadow: var(--md-elevation-2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto; /* Pushes the actions to the bottom of the card */
}

.card__actions .btn {
  flex: 1 1 auto; /* Allow buttons to grow and shrink, but maintain minimum width */
  min-width: 120px; /* Ensure buttons don't get too small */
}

@media (max-width: 540px) {
  .card__actions .btn {
    flex: 1 1 100%; /* Stack buttons on small screens */
  }
}

.btn {
  --btn-bg: var(--color-brand);
  --btn-text: var(--color-on-brand, #ffffff);
  --btn-bg-hover: var(--color-brand-hover, var(--color-brand));

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--button-radius, 12px);
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--btn-text);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: var(--md-elevation-1);
  transition: box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.btn:hover {
  box-shadow: var(--md-elevation-2);
  transform: translateY(-1px);
  background: var(--btn-bg-hover);
}
.btn:active {
  transform: translateY(0);
}

.btn--full-width {
  width: 100%;
}

/* Tonal buttons have a lighter background */
.btn-tonal {
  --btn-bg: var(--color-brand);
  --btn-text: var(--color-on-brand, #ffffff);
  --btn-bg-hover: var(--color-brand-hover, var(--color-brand));
}

/* Filled buttons are the default, but we can have an explicit class */
.btn-filled {
  --btn-bg: var(--color-brand);
  --btn-text: var(--color-on-brand, #ffffff);
  --btn-bg-hover: var(--color-brand-hover, var(--color-brand));
}



.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.label {
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
}

.input {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--md-shape-corner-small);
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface-container);
  outline: none;
  font-size: 16px;
  letter-spacing: 0.01em;
}
.input:focus {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-surface);
  box-shadow: 0 0 0 4px rgba(35, 52, 59, 0.12);
}

.icon-btn {
  background: none;
  border: 0;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
  padding: 10px;
  border-radius: var(--md-shape-corner-small);
}
.icon-btn:hover {
  background: rgba(0, 117, 181, 0.14);
}

/* Inputs with inline icon/button */
.password-wrapper,
.input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
textarea.input {
  min-height: 120px;
  resize: vertical;
}