/*
 * File: css/components/system.css
 * Logic: Drupal system regions (tabs, messages) — structure + interaction.
 * Tokens: variables.css
 */

/* --------------------------------------------------------------------------
   System region shells
   -------------------------------------------------------------------------- */

.wsdt-region--breadcrumb,
.wsdt-region--messages,
.wsdt-region--tabs {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
}

.wsdt-region--messages,
.wsdt-region--tabs {
  margin-bottom: var(--space-md);
}

/* --------------------------------------------------------------------------
   Local tasks (admin tabs) — .wsdt-region--tabs
   -------------------------------------------------------------------------- */

.wsdt-region--tabs .wsdt-block-local-tasks-block ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
}

.wsdt-region--tabs .wsdt-block-local-tasks-block a {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  background-color: var(--color-neutral-200);
  color: var(--text-body);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: var(--transition-interactive);
}

.wsdt-region--tabs .wsdt-block-local-tasks-block a.is-active,
.wsdt-region--tabs .wsdt-block-local-tasks-block a:hover {
  background-color: var(--color-accent-500);
  color: var(--text-on-accent-500);
}

/* --------------------------------------------------------------------------
   Status messages — .wsdt-region--messages
   -------------------------------------------------------------------------- */

.wsdt-messages {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: var(--border-width-sm) solid transparent;
  margin-bottom: var(--space-sm);
}

.wsdt-messages:last-child {
  margin-bottom: 0;
}

.wsdt-messages__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wsdt-messages__item + .wsdt-messages__item {
  margin-top: var(--space-xs);
}

.wsdt-messages--status {
  background-color: var(--color-success-100);
  border-color: var(--color-success-500);
  color: var(--color-success-700);
}

.wsdt-messages--warning {
  background-color: var(--color-warning-100);
  border-color: var(--color-warning-500);
  color: var(--color-warning-700);
}

.wsdt-messages--error {
  background-color: var(--color-error-100);
  border-color: var(--color-error-500);
  color: var(--color-error-700);
}