/* VaultSide formula builder — dropdown + modal (Tailwind-friendly; works in ext + PWA) */
.vault-formula {
  font-size: 0.875rem;
  line-height: 1.5;
}

.vault-formula__textarea {
  width: 100%;
  min-height: 7.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
}

.vault-formula-ac__dropdown {
  position: absolute;
  z-index: 50;
  margin-top: 2px;
  max-height: 14rem;
  overflow-y: auto;
  border-radius: 0.375rem;
  border: 1px solid rgb(226 232 240);
  background: rgb(255 255 255);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.08);
}

.vault-formula-ac__dropdown.hidden {
  display: none;
}

.vault-formula-ac__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgb(15 23 42);
}

.vault-formula-ac__item:hover,
.vault-formula-ac__item--active {
  background: rgb(241 245 249);
}

.vault-formula-ac__label {
  font-weight: 500;
}

.vault-formula-ac__hint {
  font-size: 0.75rem;
  color: rgb(100 116 139);
}

.vault-formula__preview-wrap {
  overflow-x: auto;
}

.vault-formula__preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.vault-formula__preview-table th,
.vault-formula__preview-table td {
  border: 1px solid rgb(226 232 240);
  padding: 0.375rem 0.5rem;
  text-align: left;
}

.vault-formula__preview-table th {
  background: rgb(248 250 252);
  font-weight: 600;
}

.vault-formula__err {
  color: rgb(185 28 28);
}

@media (max-width: 640px) {
  .vault-formula__actions {
    flex-direction: column;
    align-items: stretch;
  }
}